eny.space Landingpage
feat(logo-bar): add component
+207
-106
+1
app/components/logo-bar/index.ts
+1
app/components/logo-bar/index.ts
···
1
+
export { LogoBar } from "./logo-bar";
+84
app/components/logo-bar/logo-bar.tsx
+84
app/components/logo-bar/logo-bar.tsx
···
1
+
import Link from "next/link";
2
+
import {
3
+
BoxIcon,
4
+
CircleIcon,
5
+
HexagonIcon,
6
+
LayersIcon,
7
+
SparklesIcon,
8
+
SquareIcon,
9
+
CircleDotIcon,
10
+
} from "lucide-react";
11
+
import { Paragraph } from "@/components/paragraph";
12
+
13
+
const PLACEHOLDER_LINKS = [
14
+
{ label: "Short", href: "#", icon: BoxIcon },
15
+
{ label: "Medium Label", href: "#", icon: SparklesIcon },
16
+
{ label: "DescriptiveTxt", href: "#", icon: CircleIcon },
17
+
{ label: "Another Link", href: "#", icon: LayersIcon },
18
+
{ label: "QuickLabel", href: "#", icon: CircleDotIcon },
19
+
{ label: "LabelName123", href: "#", icon: SquareIcon },
20
+
{ label: "Final Example", href: "#", icon: HexagonIcon },
21
+
];
22
+
23
+
function LogoBarItem({
24
+
item,
25
+
index,
26
+
}: {
27
+
item: (typeof PLACEHOLDER_LINKS)[number];
28
+
index: number;
29
+
}) {
30
+
const Icon = item.icon;
31
+
return (
32
+
<Link
33
+
href={item.href}
34
+
className="flex shrink-0 items-center gap-3 text-base font-medium text-white/90 transition-colors hover:text-white"
35
+
>
36
+
<span className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-white/5">
37
+
<Icon className="size-5 text-white/90" aria-hidden />
38
+
</span>
39
+
{item.label}
40
+
</Link>
41
+
);
42
+
}
43
+
44
+
function LogoBarScroll() {
45
+
return (
46
+
<div className="relative w-full overflow-hidden py-8">
47
+
<div className="flex w-max animate-marquee items-center [transform:translateZ(0)]">
48
+
{["a", "b"].map((blockId) => (
49
+
<div
50
+
key={blockId}
51
+
className="flex shrink-0 items-center gap-16 whitespace-nowrap"
52
+
>
53
+
{PLACEHOLDER_LINKS.slice(0, 6).map((item, i) => (
54
+
<LogoBarItem key={`${blockId}-${i}`} item={item} index={i} />
55
+
))}
56
+
<div className="flex shrink-0 items-center">
57
+
<LogoBarItem
58
+
key={`${blockId}-6`}
59
+
item={PLACEHOLDER_LINKS[6]}
60
+
index={6}
61
+
/>
62
+
<span className="w-16 shrink-0" aria-hidden />
63
+
</div>
64
+
</div>
65
+
))}
66
+
</div>
67
+
</div>
68
+
);
69
+
}
70
+
71
+
export function LogoBar() {
72
+
return (
73
+
<section className="w-full bg-neutral-950">
74
+
<div className="mx-auto max-w-7xl px-4 py-10 sm:px-6">
75
+
<Paragraph className="mx-auto max-w-2xl text-center text-base text-white/60">
76
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
77
+
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
78
+
minim veniam, quis nostrud exercitation.
79
+
</Paragraph>
80
+
<LogoBarScroll />
81
+
</div>
82
+
</section>
83
+
);
84
+
}
+115
-105
app/globals.css
+115
-105
app/globals.css
···
5
5
@custom-variant dark (&:is(.dark *));
6
6
7
7
:root {
8
-
--background: oklch(1 0 0);
9
-
--foreground: oklch(0.145 0 0);
10
-
--card: oklch(1 0 0);
11
-
--card-foreground: oklch(0.145 0 0);
12
-
--popover: oklch(1 0 0);
13
-
--popover-foreground: oklch(0.145 0 0);
14
-
--primary: oklch(0.65 0.18 132);
15
-
--primary-foreground: oklch(0.99 0.03 121);
16
-
--secondary: oklch(0.967 0.001 286.375);
17
-
--secondary-foreground: oklch(0.21 0.006 285.885);
18
-
--muted: oklch(0.97 0 0);
19
-
--muted-foreground: oklch(0.556 0 0);
20
-
--accent: oklch(0.97 0 0);
21
-
--accent-foreground: oklch(0.205 0 0);
22
-
--destructive: oklch(0.58 0.22 27);
23
-
--border: oklch(0.922 0 0);
24
-
--input: oklch(0.922 0 0);
25
-
--ring: oklch(0.708 0 0);
26
-
--chart-1: oklch(0.90 0.18 127);
27
-
--chart-2: oklch(0.85 0.21 129);
28
-
--chart-3: oklch(0.77 0.20 131);
29
-
--chart-4: oklch(0.65 0.18 132);
30
-
--chart-5: oklch(0.53 0.14 132);
31
-
--radius: 0.625rem;
32
-
--sidebar: oklch(0.985 0 0);
33
-
--sidebar-foreground: oklch(0.145 0 0);
34
-
--sidebar-primary: oklch(0.65 0.18 132);
35
-
--sidebar-primary-foreground: oklch(0.99 0.03 121);
36
-
--sidebar-accent: oklch(0.97 0 0);
37
-
--sidebar-accent-foreground: oklch(0.205 0 0);
38
-
--sidebar-border: oklch(0.922 0 0);
39
-
--sidebar-ring: oklch(0.708 0 0);
8
+
--background: oklch(1 0 0);
9
+
--foreground: oklch(0.145 0 0);
10
+
--card: oklch(1 0 0);
11
+
--card-foreground: oklch(0.145 0 0);
12
+
--popover: oklch(1 0 0);
13
+
--popover-foreground: oklch(0.145 0 0);
14
+
--primary: oklch(0.65 0.18 132);
15
+
--primary-foreground: oklch(0.99 0.03 121);
16
+
--secondary: oklch(0.967 0.001 286.375);
17
+
--secondary-foreground: oklch(0.21 0.006 285.885);
18
+
--muted: oklch(0.97 0 0);
19
+
--muted-foreground: oklch(0.556 0 0);
20
+
--accent: oklch(0.97 0 0);
21
+
--accent-foreground: oklch(0.205 0 0);
22
+
--destructive: oklch(0.58 0.22 27);
23
+
--border: oklch(0.922 0 0);
24
+
--input: oklch(0.922 0 0);
25
+
--ring: oklch(0.708 0 0);
26
+
--chart-1: oklch(0.9 0.18 127);
27
+
--chart-2: oklch(0.85 0.21 129);
28
+
--chart-3: oklch(0.77 0.2 131);
29
+
--chart-4: oklch(0.65 0.18 132);
30
+
--chart-5: oklch(0.53 0.14 132);
31
+
--radius: 0.625rem;
32
+
--sidebar: oklch(0.985 0 0);
33
+
--sidebar-foreground: oklch(0.145 0 0);
34
+
--sidebar-primary: oklch(0.65 0.18 132);
35
+
--sidebar-primary-foreground: oklch(0.99 0.03 121);
36
+
--sidebar-accent: oklch(0.97 0 0);
37
+
--sidebar-accent-foreground: oklch(0.205 0 0);
38
+
--sidebar-border: oklch(0.922 0 0);
39
+
--sidebar-ring: oklch(0.708 0 0);
40
40
}
41
41
42
42
.dark {
43
-
--background: oklch(0.145 0 0);
44
-
--foreground: oklch(0.985 0 0);
45
-
--card: oklch(0.205 0 0);
46
-
--card-foreground: oklch(0.985 0 0);
47
-
--popover: oklch(0.205 0 0);
48
-
--popover-foreground: oklch(0.985 0 0);
49
-
--primary: oklch(0.77 0.20 131);
50
-
--primary-foreground: oklch(0.27 0.07 132);
51
-
--secondary: oklch(0.274 0.006 286.033);
52
-
--secondary-foreground: oklch(0.985 0 0);
53
-
--muted: oklch(0.269 0 0);
54
-
--muted-foreground: oklch(0.708 0 0);
55
-
--accent: oklch(0.371 0 0);
56
-
--accent-foreground: oklch(0.985 0 0);
57
-
--destructive: oklch(0.704 0.191 22.216);
58
-
--border: oklch(1 0 0 / 10%);
59
-
--input: oklch(1 0 0 / 15%);
60
-
--ring: oklch(0.556 0 0);
61
-
--chart-1: oklch(0.90 0.18 127);
62
-
--chart-2: oklch(0.85 0.21 129);
63
-
--chart-3: oklch(0.77 0.20 131);
64
-
--chart-4: oklch(0.65 0.18 132);
65
-
--chart-5: oklch(0.53 0.14 132);
66
-
--sidebar: oklch(0.205 0 0);
67
-
--sidebar-foreground: oklch(0.985 0 0);
68
-
--sidebar-primary: oklch(0.85 0.21 129);
69
-
--sidebar-primary-foreground: oklch(0.27 0.07 132);
70
-
--sidebar-accent: oklch(0.269 0 0);
71
-
--sidebar-accent-foreground: oklch(0.985 0 0);
72
-
--sidebar-border: oklch(1 0 0 / 10%);
73
-
--sidebar-ring: oklch(0.556 0 0);
43
+
--background: oklch(0.145 0 0);
44
+
--foreground: oklch(0.985 0 0);
45
+
--card: oklch(0.205 0 0);
46
+
--card-foreground: oklch(0.985 0 0);
47
+
--popover: oklch(0.205 0 0);
48
+
--popover-foreground: oklch(0.985 0 0);
49
+
--primary: oklch(0.77 0.2 131);
50
+
--primary-foreground: oklch(0.27 0.07 132);
51
+
--secondary: oklch(0.274 0.006 286.033);
52
+
--secondary-foreground: oklch(0.985 0 0);
53
+
--muted: oklch(0.269 0 0);
54
+
--muted-foreground: oklch(0.708 0 0);
55
+
--accent: oklch(0.371 0 0);
56
+
--accent-foreground: oklch(0.985 0 0);
57
+
--destructive: oklch(0.704 0.191 22.216);
58
+
--border: oklch(1 0 0 / 10%);
59
+
--input: oklch(1 0 0 / 15%);
60
+
--ring: oklch(0.556 0 0);
61
+
--chart-1: oklch(0.9 0.18 127);
62
+
--chart-2: oklch(0.85 0.21 129);
63
+
--chart-3: oklch(0.77 0.2 131);
64
+
--chart-4: oklch(0.65 0.18 132);
65
+
--chart-5: oklch(0.53 0.14 132);
66
+
--sidebar: oklch(0.205 0 0);
67
+
--sidebar-foreground: oklch(0.985 0 0);
68
+
--sidebar-primary: oklch(0.85 0.21 129);
69
+
--sidebar-primary-foreground: oklch(0.27 0.07 132);
70
+
--sidebar-accent: oklch(0.269 0 0);
71
+
--sidebar-accent-foreground: oklch(0.985 0 0);
72
+
--sidebar-border: oklch(1 0 0 / 10%);
73
+
--sidebar-ring: oklch(0.556 0 0);
74
74
}
75
75
76
76
@theme inline {
77
-
--font-sans: var(--font-sans);
78
-
--color-sidebar-ring: var(--sidebar-ring);
79
-
--color-sidebar-border: var(--sidebar-border);
80
-
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
81
-
--color-sidebar-accent: var(--sidebar-accent);
82
-
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
83
-
--color-sidebar-primary: var(--sidebar-primary);
84
-
--color-sidebar-foreground: var(--sidebar-foreground);
85
-
--color-sidebar: var(--sidebar);
86
-
--color-chart-5: var(--chart-5);
87
-
--color-chart-4: var(--chart-4);
88
-
--color-chart-3: var(--chart-3);
89
-
--color-chart-2: var(--chart-2);
90
-
--color-chart-1: var(--chart-1);
91
-
--color-ring: var(--ring);
92
-
--color-input: var(--input);
93
-
--color-border: var(--border);
94
-
--color-destructive: var(--destructive);
95
-
--color-accent-foreground: var(--accent-foreground);
96
-
--color-accent: var(--accent);
97
-
--color-muted-foreground: var(--muted-foreground);
98
-
--color-muted: var(--muted);
99
-
--color-secondary-foreground: var(--secondary-foreground);
100
-
--color-secondary: var(--secondary);
101
-
--color-primary-foreground: var(--primary-foreground);
102
-
--color-primary: var(--primary);
103
-
--color-popover-foreground: var(--popover-foreground);
104
-
--color-popover: var(--popover);
105
-
--color-card-foreground: var(--card-foreground);
106
-
--color-card: var(--card);
107
-
--color-foreground: var(--foreground);
108
-
--color-background: var(--background);
109
-
--radius-sm: calc(var(--radius) - 4px);
110
-
--radius-md: calc(var(--radius) - 2px);
111
-
--radius-lg: var(--radius);
112
-
--radius-xl: calc(var(--radius) + 4px);
113
-
--radius-2xl: calc(var(--radius) + 8px);
114
-
--radius-3xl: calc(var(--radius) + 12px);
115
-
--radius-4xl: calc(var(--radius) + 16px);
77
+
--font-sans: var(--font-sans);
78
+
--color-sidebar-ring: var(--sidebar-ring);
79
+
--color-sidebar-border: var(--sidebar-border);
80
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
81
+
--color-sidebar-accent: var(--sidebar-accent);
82
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
83
+
--color-sidebar-primary: var(--sidebar-primary);
84
+
--color-sidebar-foreground: var(--sidebar-foreground);
85
+
--color-sidebar: var(--sidebar);
86
+
--color-chart-5: var(--chart-5);
87
+
--color-chart-4: var(--chart-4);
88
+
--color-chart-3: var(--chart-3);
89
+
--color-chart-2: var(--chart-2);
90
+
--color-chart-1: var(--chart-1);
91
+
--color-ring: var(--ring);
92
+
--color-input: var(--input);
93
+
--color-border: var(--border);
94
+
--color-destructive: var(--destructive);
95
+
--color-accent-foreground: var(--accent-foreground);
96
+
--color-accent: var(--accent);
97
+
--color-muted-foreground: var(--muted-foreground);
98
+
--color-muted: var(--muted);
99
+
--color-secondary-foreground: var(--secondary-foreground);
100
+
--color-secondary: var(--secondary);
101
+
--color-primary-foreground: var(--primary-foreground);
102
+
--color-primary: var(--primary);
103
+
--color-popover-foreground: var(--popover-foreground);
104
+
--color-popover: var(--popover);
105
+
--color-card-foreground: var(--card-foreground);
106
+
--color-card: var(--card);
107
+
--color-foreground: var(--foreground);
108
+
--color-background: var(--background);
109
+
--radius-sm: calc(var(--radius) - 4px);
110
+
--radius-md: calc(var(--radius) - 2px);
111
+
--radius-lg: var(--radius);
112
+
--radius-xl: calc(var(--radius) + 4px);
113
+
--radius-2xl: calc(var(--radius) + 8px);
114
+
--radius-3xl: calc(var(--radius) + 12px);
115
+
--radius-4xl: calc(var(--radius) + 16px);
116
+
--animate-marquee: marquee 25s linear infinite;
117
+
118
+
@keyframes marquee {
119
+
0% {
120
+
transform: translate3d(0, 0, 0);
121
+
}
122
+
100% {
123
+
transform: translate3d(-50%, 0, 0);
124
+
}
125
+
}
116
126
}
117
127
118
128
@layer base {
119
129
* {
120
130
@apply border-border outline-ring/50;
121
-
}
131
+
}
122
132
body {
123
133
@apply bg-background text-foreground;
124
-
}
125
-
}
134
+
}
135
+
}