eny.space Landingpage
feat(background): add planets, adjust colors
+45
-15
+1
-1
app/components/cta/cta-section.tsx
+1
-1
app/components/cta/cta-section.tsx
···
42
42
</ButtonLink>
43
43
<ButtonLink
44
44
href="/signup"
45
-
className="px-6 text-xs font-semibold uppercase tracking-wide text-neutral-950 shadow-[0_0_40px_rgba(190,242,100,0.45)] bg-amber-400 hover:bg-amber-300"
45
+
className="px-6 text-xs font-semibold uppercase tracking-wide text-neutral-950 shadow-[0_0_40px_rgba(232,121,249,0.45)] bg-fuchsia-400 hover:bg-fuchsia-300"
46
46
endIcon={<ArrowRightIcon className="size-4" aria-hidden />}
47
47
>
48
48
Start free trial
+1
-1
app/components/features/feature-card.tsx
+1
-1
app/components/features/feature-card.tsx
···
22
22
className,
23
23
)}
24
24
>
25
-
<div className="mb-1 inline-flex size-10 items-center justify-center rounded-xl bg-amber-400/15 text-amber-300 shadow-[0_0_30px_rgba(190,242,100,0.6)]">
25
+
<div className="mb-1 inline-flex size-10 items-center justify-center rounded-xl bg-fuchsia-400/15 text-fuchsia-300 shadow-[0_0_30px_rgba(232,121,249,0.6)]">
26
26
{icon}
27
27
</div>
28
28
<Heading
+30
-3
app/components/hero/hero-background.tsx
+30
-3
app/components/hero/hero-background.tsx
···
16
16
["0%", "-48%", "-64%"],
17
17
);
18
18
19
-
// "Camera angle" milestone – planet grows and shifts between 0.4–0.6
19
+
// "Camera angle" milestone – planets grow and shift between 0.4–0.6
20
20
const planetScale = useTransform(
21
21
scrollYProgress,
22
22
[0, 0.4, 0.6, 1],
···
121
121
}}
122
122
aria-hidden
123
123
>
124
-
<div className="absolute bottom-[-22%] right-[2%] h-[360px] w-[360px] overflow-hidden rounded-full">
124
+
<div className="absolute bottom-[-22%] right-[2%] h-[360px] w-[360px] overflow-hidden rounded-full opacity-80">
125
125
<Image
126
126
src="/jupiter2.png"
127
127
alt="Gas giant planet"
···
132
132
</div>
133
133
</motion.div>
134
134
135
-
{/* LAYER 3b – Secondary planet (Earth image) */}
135
+
{/* LAYER 3b – Secondary planets (Earth, Mars, Venus, Neptune images) */}
136
136
<motion.div
137
137
className="pointer-events-none fixed inset-0 -z-[1]"
138
138
style={{
···
146
146
<div className="absolute bottom-[10%] left-[6%] h-[220px] w-[220px] overflow-hidden rounded-full">
147
147
<Image
148
148
src="/earth.png"
149
+
alt="Blue planet"
150
+
fill
151
+
priority={false}
152
+
className="object-cover object-center"
153
+
/>
154
+
</div>
155
+
<div className="absolute top-[54%] right-[30%] h-[120px] w-[120px] overflow-hidden rounded-full opacity-80">
156
+
<Image
157
+
src="/mars.png"
158
+
alt="Red planet"
159
+
fill
160
+
priority={false}
161
+
className="object-cover object-center"
162
+
/>
163
+
</div>
164
+
<div className="absolute top-[50%] right-[20%] h-[70px] w-[100px] overflow-hidden rounded-full opacity-80">
165
+
<Image
166
+
src="/venus.png"
167
+
alt="Yellow planet"
168
+
fill
169
+
priority={false}
170
+
className="object-cover object-center"
171
+
/>
172
+
</div>
173
+
<div className="absolute top-[30%] left-[35%] h-[60px] w-[60px] overflow-hidden rounded-full opacity-80">
174
+
<Image
175
+
src="/neptune.png"
149
176
alt="Blue planet"
150
177
fill
151
178
priority={false}
+6
-3
app/components/hero/hero.tsx
+6
-3
app/components/hero/hero.tsx
···
7
7
return (
8
8
<section className="relative flex min-h-[calc(100vh-3.5rem)] w-full flex-col justify-end overflow-hidden px-4 pb-12 pt-16 sm:px-6 sm:pt-24">
9
9
<HeroBackground />
10
-
{/* Centered hero logo */}
11
-
<div className="pointer-events-none absolute inset-0 -z-5 flex items-center justify-center opacity-15">
10
+
{/* Centered hero logo, moved higher with -mt-24 (negative margin top) */}
11
+
<div
12
+
className="pointer-events-none absolute inset-0 flex items-center justify-center opacity-15 -mt-24"
13
+
style={{ zIndex: 1 }}
14
+
>
12
15
<Image
13
16
src="/logo.svg"
14
-
alt="eny.space"
17
+
alt="eny.space logo"
15
18
width={520}
16
19
height={520}
17
20
className="shrink-0"
+5
-5
app/components/pricing/pricing-section.tsx
+5
-5
app/components/pricing/pricing-section.tsx
···
84
84
<Card
85
85
key={plan.name}
86
86
className={[
87
-
"flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-neutral-800/90 to-neutral-900/90 p-6 text-white shadow-xl/30",
87
+
"flex h-full flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-slate-900/65 to-slate-950/75 p-6 text-white shadow-xl/30",
88
88
plan.highlight
89
-
? "relative bg-gradient-to-b from-amber-400/90 via-amber-400/80 to-amber-500/90 text-neutral-950 shadow-[0_0_40px_rgba(190,242,100,0.4)]"
89
+
? "relative bg-gradient-to-b from-fuchsia-500/65 via-fuchsia-500/55 to-fuchsia-600/70 text-neutral-950 shadow-[0_0_36px_rgba(232,121,249,0.3)]"
90
90
: "",
91
91
]
92
92
.filter(Boolean)
···
98
98
{plan.name}
99
99
</CardTitle>
100
100
{plan.badge ? (
101
-
<span className="rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-amber-300 md:text-[11px]">
101
+
<span className="rounded-full bg-neutral-900/80 px-3 py-1 text-xs font-medium uppercase tracking-wide text-fuchsia-300 md:text-[11px]">
102
102
{plan.badge}
103
103
</span>
104
104
) : null}
···
127
127
className={[
128
128
"w-full rounded-full px-4 py-3 text-center text-sm font-semibold uppercase tracking-wide transition",
129
129
plan.highlight
130
-
? "bg-neutral-950 text-amber-300 hover:bg-neutral-900"
130
+
? "bg-neutral-950 text-fuchsia-200 hover:bg-neutral-900"
131
131
: "bg-white text-neutral-950 hover:bg-neutral-200",
132
132
].join(" ")}
133
133
>
···
155
155
].join(" ")}
156
156
>
157
157
<div className="inline-flex items-center gap-2">
158
-
<span className="inline-block size-1.5 rounded-full bg-amber-400" />
158
+
<span className="inline-block size-1.5 rounded-full bg-fuchsia-400" />
159
159
<span>{feature}</span>
160
160
</div>
161
161
</li>
+2
-2
app/components/testimonials/testimonials-section.tsx
+2
-2
app/components/testimonials/testimonials-section.tsx
···
59
59
</div>
60
60
</div>
61
61
<div className="flex items-center gap-2 text-sm font-semibold text-white/85">
62
-
<span className="flex size-6 items-center justify-center rounded-full bg-amber-400/15">
63
-
<SparklesIcon className="size-3.5 text-amber-300" aria-hidden />
62
+
<span className="flex size-6 items-center justify-center rounded-full bg-fuchsia-400/15">
63
+
<SparklesIcon className="size-3.5 text-fuchsia-300" aria-hidden />
64
64
</span>
65
65
<span>{testimonial.company}</span>
66
66
</div>
public/mars.png
public/mars.png
This is a binary file and will not be displayed.
public/neptune.png
public/neptune.png
This is a binary file and will not be displayed.
public/venus.png
public/venus.png
This is a binary file and will not be displayed.