eny.space Landingpage
feat(feature-card): add feature card and feature section
+125
+39
app/components/features/feature-card.tsx
+39
app/components/features/feature-card.tsx
···
1
+
import { cn } from "@/actions/lib/utils";
2
+
import { Heading } from "@/components/heading";
3
+
import { Paragraph } from "@/components/paragraph";
4
+
5
+
interface FeatureCardProps {
6
+
icon: React.ReactNode;
7
+
title: string;
8
+
description: string;
9
+
className?: string;
10
+
}
11
+
12
+
export function FeatureCard({
13
+
icon,
14
+
title,
15
+
description,
16
+
className,
17
+
}: FeatureCardProps) {
18
+
return (
19
+
<div
20
+
className={cn(
21
+
"relative flex flex-col items-center gap-3 rounded-2xl bg-neutral-900/80 px-5 py-6 shadow-[0_0_40px_rgba(0,0,0,0.6)] ring-1 ring-white/5",
22
+
className,
23
+
)}
24
+
>
25
+
<div className="mb-1 inline-flex size-10 items-center justify-center rounded-xl bg-lime-400/15 text-lime-300 shadow-[0_0_30px_rgba(190,242,100,0.6)]">
26
+
{icon}
27
+
</div>
28
+
<Heading
29
+
as="h3"
30
+
className="text-base font-semibold text-white text-center"
31
+
>
32
+
{title}
33
+
</Heading>
34
+
<Paragraph className="text-sm leading-relaxed text-white/70 text-center">
35
+
{description}
36
+
</Paragraph>
37
+
</div>
38
+
);
39
+
}
+81
app/components/features/features-section.tsx
+81
app/components/features/features-section.tsx
···
1
+
import {
2
+
CloudIcon,
3
+
NetworkIcon,
4
+
ScaleIcon,
5
+
ShieldCheckIcon,
6
+
ZapIcon,
7
+
RocketIcon,
8
+
} from "lucide-react";
9
+
import { Heading } from "@/components/heading";
10
+
import { Paragraph } from "@/components/paragraph";
11
+
import { FeatureCard } from "./feature-card";
12
+
13
+
const FEATURES = [
14
+
{
15
+
title: "Example Feature One.",
16
+
description:
17
+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus efficitur urna a augue pulvinar, vitae facilisis massa dictum.",
18
+
icon: <NetworkIcon className="size-5" aria-hidden />,
19
+
},
20
+
{
21
+
title: "Sample Multi-Network.",
22
+
description:
23
+
"Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti.",
24
+
icon: <CloudIcon className="size-5" aria-hidden />,
25
+
},
26
+
{
27
+
title: "Lorem Scalability.",
28
+
description:
29
+
"Suspendisse vitae dictum lectus. Ut bibendum, leo eu tempor ullamcorper, eros ex euismod nunc, nec cursus nisi ex non purus.",
30
+
icon: <ScaleIcon className="size-5" aria-hidden />,
31
+
},
32
+
{
33
+
title: "Secure Example.",
34
+
description:
35
+
"Etiam egestas, erat sit amet dictum cursus, sapien quam gravida ex, nec imperdiet libero sem at sapien faucibus consequat.",
36
+
icon: <ShieldCheckIcon className="size-5" aria-hidden />,
37
+
},
38
+
// {
39
+
// title: "Instant Launchpad.",
40
+
// description:
41
+
// "Quisque congue elit eu velit maximus auctor. Nullam ac mauris quam. Nullam eget erat convallis, consequat purus non, cursus enim.",
42
+
// icon: <RocketIcon className="size-5" aria-hidden />,
43
+
// },
44
+
{
45
+
title: "Performance Demo.",
46
+
description:
47
+
"Praesent iaculis urna non eros pretium, in posuere lectus cursus. Sed facilisis facilisis ex, ac molestie tellus posuere vitae.",
48
+
icon: <ZapIcon className="size-5" aria-hidden />,
49
+
},
50
+
];
51
+
52
+
export function FeaturesSection() {
53
+
return (
54
+
<section className="relative w-full bg-neutral-950 px-4 py-16 sm:px-6 sm:py-20">
55
+
<div className="mx-auto max-w-5xl text-center">
56
+
<Heading
57
+
as="h2"
58
+
className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
59
+
>
60
+
Lorem Ipsum Dolor Sit Amet - Fast, Reliable, Easy.
61
+
</Heading>
62
+
<Paragraph className="mt-4 text-sm text-white/70 sm:text-base">
63
+
Pellentesque habitant morbi tristique senectus et netus et malesuada
64
+
fames ac turpis egestas. Proin facilisis nec erat eu molestie.
65
+
</Paragraph>
66
+
</div>
67
+
68
+
<div className="mx-auto mt-10 flex max-w-6xl flex-wrap justify-center gap-6 sm:mt-12">
69
+
{FEATURES.map((feature) => (
70
+
<FeatureCard
71
+
key={feature.title}
72
+
icon={feature.icon}
73
+
title={feature.title}
74
+
description={feature.description}
75
+
className="basis-[min(100%,320px)]"
76
+
/>
77
+
))}
78
+
</div>
79
+
</section>
80
+
);
81
+
}
+3
app/components/features/index.ts
+3
app/components/features/index.ts
+2
app/page.tsx
+2
app/page.tsx
···
1
1
import { Hero } from "@/components/hero/hero";
2
2
import { LogoBar } from "@/components/logo-bar";
3
+
import { FeaturesSection } from "@/components/features";
3
4
4
5
export default function Page() {
5
6
return (
6
7
<>
7
8
<Hero />
8
9
<LogoBar />
10
+
<FeaturesSection />
9
11
</>
10
12
);
11
13
}