eny.space Landingpage
feat(testimonials): add testimonials section
+116
+2
app/components/testimonials/index.ts
+2
app/components/testimonials/index.ts
+112
app/components/testimonials/testimonials-section.tsx
+112
app/components/testimonials/testimonials-section.tsx
···
1
+
import {
2
+
Card,
3
+
CardHeader,
4
+
CardFooter,
5
+
} from "@/actions/components/ui/card";
6
+
import { Heading } from "@/components/heading";
7
+
import { Paragraph } from "@/components/paragraph";
8
+
import { SparklesIcon } from "lucide-react";
9
+
10
+
type Testimonial = {
11
+
quote: string;
12
+
name: string;
13
+
role: string;
14
+
company: string;
15
+
};
16
+
17
+
const TESTIMONIALS: Testimonial[] = [
18
+
{
19
+
quote:
20
+
"Switching to eny.space was the best decision for our DeFi platform. Uptime and performance are unmatched.",
21
+
name: "Isagi Yoichi",
22
+
role: "Chief Technology Officer",
23
+
company: "3Portals",
24
+
},
25
+
{
26
+
quote:
27
+
"We can finally deploy smart contracts confidently without worrying about central servers failing.",
28
+
name: "Oliver Aiku",
29
+
role: "Digital Community Lead",
30
+
company: "Acme Corp",
31
+
},
32
+
{
33
+
quote:
34
+
"The migration was seamless and our team now ships faster than ever, with full visibility into our data.",
35
+
name: "Alex Rivera",
36
+
role: "Head of Engineering",
37
+
company: "Nebula Labs",
38
+
},
39
+
];
40
+
41
+
function TestimonialCard({ testimonial }: { testimonial: Testimonial }) {
42
+
return (
43
+
<Card className="flex h-full min-w-[280px] max-w-sm flex-col justify-between rounded-3xl border-none bg-gradient-to-b from-neutral-900/80 to-neutral-950/90 p-6 text-white/90 shadow-xl/30 whitespace-normal">
44
+
<CardHeader className="px-0">
45
+
<Paragraph className="text-sm text-white/80">
46
+
{testimonial.quote}
47
+
</Paragraph>
48
+
</CardHeader>
49
+
50
+
<CardFooter className="mt-4 items-center justify-between gap-4 border-t border-white/10 bg-transparent px-0 pt-4">
51
+
<div className="flex items-center gap-3">
52
+
<div className="flex size-9 items-center justify-center rounded-full bg-white/10 text-xs font-semibold uppercase tracking-wide text-white/90">
53
+
{testimonial.name
54
+
.split(" ")
55
+
.map((part) => part[0])
56
+
.join("")}
57
+
</div>
58
+
<div className="flex flex-col">
59
+
<span className="text-sm font-medium text-white">
60
+
{testimonial.name}
61
+
</span>
62
+
<span className="text-xs text-white/60">{testimonial.role}</span>
63
+
</div>
64
+
</div>
65
+
<div className="flex items-center gap-2 text-sm font-semibold text-white/85">
66
+
<span className="flex size-6 items-center justify-center rounded-full bg-amber-400/15">
67
+
<SparklesIcon className="size-3.5 text-amber-300" aria-hidden />
68
+
</span>
69
+
<span>{testimonial.company}</span>
70
+
</div>
71
+
</CardFooter>
72
+
</Card>
73
+
);
74
+
}
75
+
76
+
export function TestimonialsSection() {
77
+
return (
78
+
<section className="relative w-full bg-neutral-950 px-4 py-20 sm:px-6 sm:py-24">
79
+
<div className="mx-auto max-w-5xl text-center">
80
+
<Heading
81
+
as="h2"
82
+
className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
83
+
>
84
+
Trusted by Innovators Worldwide.
85
+
</Heading>
86
+
<Paragraph className="mt-4 text-sm text-white/70 sm:text-base">
87
+
Hear first-hand from our incredible community of customers.
88
+
</Paragraph>
89
+
</div>
90
+
91
+
<div className="mx-auto mt-12 max-w-6xl">
92
+
<div className="relative w-full overflow-hidden py-4">
93
+
<div className="flex w-max animate-marquee items-stretch gap-6 [transform:translateZ(0)]">
94
+
{["a", "b"].map((blockId) => (
95
+
<div
96
+
key={blockId}
97
+
className="flex shrink-0 items-stretch gap-6 whitespace-nowrap"
98
+
>
99
+
{TESTIMONIALS.map((testimonial) => (
100
+
<TestimonialCard
101
+
key={`${blockId}-${testimonial.name}`}
102
+
testimonial={testimonial}
103
+
/>
104
+
))}
105
+
</div>
106
+
))}
107
+
</div>
108
+
</div>
109
+
</div>
110
+
</section>
111
+
);
112
+
}
+2
app/page.tsx
+2
app/page.tsx
···
2
2
import { LogoBar } from "@/components/logo-bar";
3
3
import { FeaturesSection } from "@/components/features";
4
4
import { PricingSection } from "@/components/pricing";
5
+
import { TestimonialsSection } from "@/components/testimonials";
5
6
6
7
export default function Page() {
7
8
return (
···
10
11
<LogoBar />
11
12
<FeaturesSection />
12
13
<PricingSection />
14
+
<TestimonialsSection />
13
15
</>
14
16
);
15
17
}