Merge pull request #70 from AnthonyFinney/feat/link_feat_to_doc

nice!!

Author: idanlodzki

components/FeatureCard.tsx

@@ -1,19 +1,26 @@
 import React from 'react';
-import { LucideIcon } from 'lucide-react';
+import { LucideIcon, ExternalLink } from 'lucide-react';
+import Link from 'next/link';
 
 interface FeatureCardProps {
   icon: LucideIcon;
   title: string;
   description: string;
   className?: string;
+  link?: string;
 }
 
-const FeatureCard: React.FC<FeatureCardProps> = ({ 
-  icon: Icon, 
-  title, 
-  description, 
-  className = '' 
+const DEFAULT_DOCS_URL = 'https://opsimate.vercel.app/docs/';
+
+const FeatureCard: React.FC<FeatureCardProps> = ({
+  icon: Icon,
+  title,
+  description,
+  className = '',
+  link,
 }) => {
+  const resolvedLink = link ?? DEFAULT_DOCS_URL;
+
   return (
     <div className={`feature-card group hover:scale-105 transition-all duration-300 ${className}`}>
       <div className="flex items-center mb-3">
@@ -23,6 +30,20 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
       </div>
       <h3 className="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">{title}</h3>
       <p className="text-sm text-surface-600 dark:text-surface-400 leading-relaxed">{description}</p>
+
+      {resolvedLink && (
+        <Link
+          href={resolvedLink}
+          className="mt-3 inline-flex items-center gap-1 text-blue-600 hover:text-blue-700 text-sm font-medium transition-colors duration-200"
+          {...(resolvedLink.startsWith('https') && {
+            target: "_blank",
+            rel: "noopener noreferrer"
+          })}
+        >
+          Learn more
+          {resolvedLink.startsWith('https') && <ExternalLink className="h-3 w-3" />}
+        </Link>
+      )}
     </div>
   );
 };

components/FeaturesSection.tsx

@@ -15,42 +15,50 @@ const FeaturesSection: React.FC = () => {
     {
       icon: Monitor,
       title: 'Unified Monitoring',
-      description: 'Monitor your entire infrastructure from a single dashboard with real-time metrics and health status.'
+      description: 'Monitor your entire infrastructure from a single dashboard with real-time metrics and health status.',
+      link: 'https://opsimate.vercel.app/docs/core-features',
     },
     {
       icon: Server,
       title: 'Infrastructure Management',
-      description: 'Manage VMs and Kubernetes clusters seamlessly via SSH without agent installation.'
+      description: 'Manage VMs and Kubernetes clusters seamlessly via SSH without agent installation.',
+      link: 'https://opsimate.vercel.app/docs/providers-services/overview',
     },
     {
       icon: Activity,
       title: 'Real-time Metrics',
-      description: 'Track system performance with instant visibility into CPU, memory, disk, and network usage.'
+      description: 'Track system performance with instant visibility into CPU, memory, disk, and network usage.',
+      link: 'https://opsimate.vercel.app/docs/dashboards/overview',
     },
     {
       icon: Bell,
       title: 'Smart Alerts',
-      description: 'Get intelligent notifications before issues impact users with custom thresholds.'
+      description: 'Get intelligent notifications before issues impact users with custom thresholds.',
+      link: 'https://opsimate.vercel.app/docs/alerts/adding-alerts',
     },
     {
       icon: Database,
       title: 'Log Aggregation',
-      description: 'Centralize logs from all services with powerful search and pattern analysis.'
+      description: 'Centralize logs from all services with powerful search and pattern analysis.',
+      link: 'https://opsimate.vercel.app/docs/integrations/overview',
     },
     {
       icon: GitBranch,
       title: 'Service Discovery',
-      description: 'Auto-discover systemd services and containers without manual configuration.'
+      description: 'Auto-discover systemd services and containers without manual configuration.',
+      link: 'https://opsimate.vercel.app/docs/providers-services/services/add-services',
     },
     {
       icon: Settings,
       title: 'Automated Actions',
-      description: 'Create automated responses with workflows that restart services and scale resources.'
+      description: 'Create automated responses with workflows that restart services and scale resources.',
+      link: 'https://opsimate.vercel.app/docs/dashboards/service-menu',
     },
     {
       icon: GitBranch,
       title: 'Open Source',
-      description: 'Fully open source with transparent development. Contribute and customize freely.'
+      description: 'Fully open source with transparent development. Contribute and customize freely.',
+      link: 'https://opsimate.vercel.app/docs/development',
     }
   ];
 
@@ -77,11 +85,10 @@ const FeaturesSection: React.FC = () => {
               icon={feature.icon}
               title={feature.title}
               description={feature.description}
+              link={feature.link}
             />
           ))}
         </div>
-
-
       </div>
     </section>
   );