[FEAT] - Adding link to features to doc

[AnthonyFinney]

Issue Reference

[Feature] Link Features Section to Documentation Pages #51

---

What Was Changed

so i linked the features cards to the doc site

---

Why Was It Changed

there was no link for the features to the doc

---

Screenshots

Before

After

Summary by CodeRabbit

• New Features
  • Feature cards can now include optional "Learn more" links; a default docs link is used when none is provided.
  • Links render alongside title/description and become clickable navigation points to documentation or resources.
  • HTTPS links open in a new tab with appropriate security attributes and show an external-link icon; non-HTTPS links render without those extras.

[vercel]

@AnthonyFinney is attempting to deploy a commit to the idan lodzki's projects Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Walkthrough

Adds a link property to feature items and to FeatureCard props. FeatureCard now resolves a link (provided or default) and conditionally renders a "Learn more" link that, for HTTPS URLs, opens in a new tab with rel="noopener noreferrer" and shows an external-link icon.

Changes

Cohort / File(s)

Summary

Feature card link integration components/FeatureCard.tsx, components/FeaturesSection.tsx

FeatureCard: added optional link?: string to FeatureCardProps, introduced a default docs URL resolution, imported ExternalLink and Next.js Link, and implemented conditional "Learn more" rendering that adds target="_blank" and rel="noopener noreferrer" and shows an external-link icon for HTTPS links. FeaturesSection: added link field to each feature object in the features array and passed link into FeatureCard.

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a084246 and 3cb402a.

📒 Files selected for processing (1)

• components/FeatureCard.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• components/FeatureCard.tsx

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

components/FeatureCard.tsx (1)

30-34: Extract the fallback URL to avoid duplication.

The fallback URL 'https://opsimate.vercel.app/docs/' is repeated on lines 31 and 34, violating the DRY principle.

Apply this diff to extract the fallback URL:

+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">
         <div className="bg-surface-200 dark:bg-surface-700 p-2 rounded-lg group-hover:bg-surface-300 dark:group-hover:bg-surface-600 transition-colors duration-300">
           <Icon className="h-5 w-5 text-surface-600 dark:text-surface-400" />
         </div>
       </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>
 
-      {(
-        link ?? 'https://opsimate.vercel.app/docs/'
-      ) && (
+      {resolvedLink && (
         <Link
-          href={link ?? 'https://opsimate.vercel.app/docs/'}
+          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"
-          {...(link?.startsWith('https') && {
+          {...(resolvedLink.startsWith('https') && {
             target: "_blank",
             rel: "noopener noreferrer"
           })}
         >
           Learn more
           <ExternalLink className="h-3 w-3" />
         </Link>
       )}
     </div>
   );
 };

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ad2e60e and a084246.

📒 Files selected for processing (2)

• components/FeatureCard.tsx (2 hunks)
• components/FeaturesSection.tsx (2 hunks)

🔇 Additional comments (4)

components/FeaturesSection.tsx (2)

14-63: LGTM! Feature data structure extended correctly.

The addition of link properties to each feature object is well-structured and consistent. All links follow the same domain pattern (opsimate.vercel.app/docs/) with appropriate documentation paths.

---

88-88: Correctly passes the link prop to FeatureCard.

The link property is properly passed through to the FeatureCard component.

components/FeatureCard.tsx (2)

2-3: LGTM! Appropriate imports added.

The ExternalLink icon and Next.js Link component are correctly imported for the new linking functionality.

---

10-10: LGTM! Props interface and destructuring updated correctly.

The optional link prop is properly added to the interface and destructured in the component parameters.

Also applies to: 13-18