chore: format
This commit is contained in:
@@ -1,115 +1,115 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import Link from "next/link"
|
||||
import type { LucideIcon } from "lucide-react"
|
||||
import Link from "next/link";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import {
|
||||
Zap,
|
||||
Wifi,
|
||||
Database,
|
||||
MessageSquare,
|
||||
FileCode,
|
||||
Settings,
|
||||
BugPlay,
|
||||
ChevronDown,
|
||||
} from "lucide-react"
|
||||
import constants from "@/constants"
|
||||
Zap,
|
||||
Wifi,
|
||||
Database,
|
||||
MessageSquare,
|
||||
FileCode,
|
||||
Settings,
|
||||
BugPlay,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import constants from "@/constants";
|
||||
|
||||
interface Feature {
|
||||
icon: React.ReactElement<LucideIcon>
|
||||
title: string
|
||||
description: string
|
||||
link?: {
|
||||
text: string
|
||||
url: string
|
||||
}
|
||||
icon: React.ReactElement<LucideIcon>;
|
||||
title: string;
|
||||
description: string;
|
||||
link?: {
|
||||
text: string;
|
||||
url: string;
|
||||
};
|
||||
}
|
||||
|
||||
export const featuresData: Feature[] = [
|
||||
{
|
||||
icon: <Zap className="h-6 w-6 text-yellow-400" />,
|
||||
title: "Zero-Config",
|
||||
description: "Sensible built-in default configs for common use cases",
|
||||
},
|
||||
// {
|
||||
// icon: <Code className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
// title: "Extensible",
|
||||
// description:
|
||||
// "Expose the full ability to customize the behavior of the platform",
|
||||
// },
|
||||
{
|
||||
icon: <Wifi className="h-6 w-6 text-gray-300" />,
|
||||
title: "SMTP Support",
|
||||
description: "Connect any SMTP server to send emails to your subscribers",
|
||||
},
|
||||
{
|
||||
icon: <Database className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
title: "Unlimited Lists",
|
||||
description: "Create and manage as many newsletter lists as you need",
|
||||
},
|
||||
{
|
||||
icon: <MessageSquare className="h-6 w-6 text-gray-300" />,
|
||||
title: "Campaign Management",
|
||||
description: "Built-in support for creating and scheduling email campaigns",
|
||||
},
|
||||
// {
|
||||
// icon: <RefreshCw className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
// title: "Auto-scaling",
|
||||
// description: "Automatically handle thousands of subscribers with ease",
|
||||
// },
|
||||
{
|
||||
icon: <FileCode className="h-6 w-6 text-yellow-400" />,
|
||||
title: "REST API",
|
||||
description: "Comprehensive API for integrating with your applications",
|
||||
link: {
|
||||
text: "API Documentation",
|
||||
url: constants.env.DOCS_URL + "/api",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: <Settings className="h-6 w-6 text-gray-300" />,
|
||||
title: "Advanced Analytics",
|
||||
description: "Track opens, clicks, and engagement for all your campaigns",
|
||||
},
|
||||
{
|
||||
icon: <BugPlay className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
title: "Built by Developers",
|
||||
description:
|
||||
"For developers, by developers. Everything you need to build and test with ease.",
|
||||
link: {
|
||||
text: "Development Guide",
|
||||
url: constants.env.DOCS_URL,
|
||||
},
|
||||
},
|
||||
]
|
||||
{
|
||||
icon: <Zap className="h-6 w-6 text-yellow-400" />,
|
||||
title: "Zero-Config",
|
||||
description: "Sensible built-in default configs for common use cases",
|
||||
},
|
||||
// {
|
||||
// icon: <Code className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
// title: "Extensible",
|
||||
// description:
|
||||
// "Expose the full ability to customize the behavior of the platform",
|
||||
// },
|
||||
{
|
||||
icon: <Wifi className="h-6 w-6 text-gray-300" />,
|
||||
title: "SMTP Support",
|
||||
description: "Connect any SMTP server to send emails to your subscribers",
|
||||
},
|
||||
{
|
||||
icon: <Database className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
title: "Unlimited Lists",
|
||||
description: "Create and manage as many newsletter lists as you need",
|
||||
},
|
||||
{
|
||||
icon: <MessageSquare className="h-6 w-6 text-gray-300" />,
|
||||
title: "Campaign Management",
|
||||
description: "Built-in support for creating and scheduling email campaigns",
|
||||
},
|
||||
// {
|
||||
// icon: <RefreshCw className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
// title: "Auto-scaling",
|
||||
// description: "Automatically handle thousands of subscribers with ease",
|
||||
// },
|
||||
{
|
||||
icon: <FileCode className="h-6 w-6 text-yellow-400" />,
|
||||
title: "REST API",
|
||||
description: "Comprehensive API for integrating with your applications",
|
||||
link: {
|
||||
text: "API Documentation",
|
||||
url: constants.env.DOCS_URL + "/api",
|
||||
},
|
||||
},
|
||||
{
|
||||
icon: <Settings className="h-6 w-6 text-gray-300" />,
|
||||
title: "Advanced Analytics",
|
||||
description: "Track opens, clicks, and engagement for all your campaigns",
|
||||
},
|
||||
{
|
||||
icon: <BugPlay className="h-6 w-6 text-[#4ECDC4]" />,
|
||||
title: "Built by Developers",
|
||||
description:
|
||||
"For developers, by developers. Everything you need to build and test with ease.",
|
||||
link: {
|
||||
text: "Development Guide",
|
||||
url: constants.env.DOCS_URL,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export const Features = ({ features }: { features: Feature[] }) => (
|
||||
<section className="container mx-auto px-4 py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative group overflow-hidden bg-[#1a1a1a] p-6 rounded-lg border border-gray-800 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-[#4ECDC4]/10
|
||||
<section className="container mx-auto px-4 py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{features.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="relative group overflow-hidden bg-[#1a1a1a] p-6 rounded-lg border border-gray-800 transition-all duration-300 ease-in-out hover:shadow-lg hover:shadow-[#4ECDC4]/10
|
||||
before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite]
|
||||
before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent"
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<div className="bg-[#252525] w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">{feature.title}</h3>
|
||||
<p className="text-gray-400">{feature.description}</p>
|
||||
{feature.link && (
|
||||
<Link
|
||||
href={feature.link.url}
|
||||
className="text-[#4ECDC4] hover:underline flex items-center gap-1 mt-4 text-sm"
|
||||
>
|
||||
{feature.link.text}{" "}
|
||||
<ChevronDown className="h-4 w-4 rotate-270" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
>
|
||||
<div className="relative z-10">
|
||||
<div className="bg-[#252525] w-12 h-12 rounded-lg flex items-center justify-center mb-4">
|
||||
{feature.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold mb-2">{feature.title}</h3>
|
||||
<p className="text-gray-400">{feature.description}</p>
|
||||
{feature.link && (
|
||||
<Link
|
||||
href={feature.link.url}
|
||||
className="text-[#4ECDC4] hover:underline flex items-center gap-1 mt-4 text-sm"
|
||||
>
|
||||
{feature.link.text}{" "}
|
||||
<ChevronDown className="h-4 w-4 rotate-270" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user