samsour.de
eny.space Landingpage
davor87.tngl.sh
1import {
2 CloudIcon,
3 NetworkIcon,
4 ScaleIcon,
5 ShieldCheckIcon,
6 ZapIcon,
7 RocketIcon,
8} from "lucide-react";
9import { Heading } from "@/components/heading";
10import { Paragraph } from "@/components/paragraph";
11import { FeatureCard } from "./feature-card";
12
13const 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
52export function FeaturesSection() {
53 return (
54 <section
55 id="features"
56 className="relative w-full bg-neutral-950 px-4 py-16 sm:px-6 sm:py-20"
57 >
58 <div className="mx-auto max-w-5xl text-center">
59 <Heading
60 as="h2"
61 className="text-2xl font-semibold tracking-tight text-white sm:text-3xl md:text-4xl"
62 >
63 Lorem Ipsum Dolor Sit Amet - Fast, Reliable, Easy.
64 </Heading>
65 <Paragraph className="mt-4 text-sm text-white/70 sm:text-base">
66 Pellentesque habitant morbi tristique senectus et netus et malesuada
67 fames ac turpis egestas. Proin facilisis nec erat eu molestie.
68 </Paragraph>
69 </div>
70
71 <div className="mx-auto mt-10 flex max-w-6xl flex-wrap justify-center gap-6 sm:mt-12">
72 {FEATURES.map((feature) => (
73 <FeatureCard
74 key={feature.title}
75 icon={feature.icon}
76 title={feature.title}
77 description={feature.description}
78 className="basis-[min(100%,320px)]"
79 />
80 ))}
81 </div>
82 </section>
83 );
84}