From 4f03b8cf47ae240137372142bdf0398ef7868b8f Mon Sep 17 00:00:00 2001
From: Krystie <krystie@openclaw.local>
Date: Fri, 1 May 2026 02:41:32 -0700
Subject: [PATCH] desloppify: extract shared Premium features and move
 component data outside render

- PricingCards.tsx: Extract repeated Premium features array to PREMIUM_FEATURES constant
- Footer.tsx: Move footerSections, socialLinks, and CURRENT_YEAR outside component to avoid recreation on every render
---
 src/components/Footer.tsx       | 88 ++++++++++++++++-----------------
 src/components/PricingCards.tsx | 31 +++++-------
 2 files changed, 55 insertions(+), 64 deletions(-)

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 04da7f7..dc94579 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,50 +1,50 @@
 import Link from 'next/link';
 import Image from 'next/image';
 
+const footerSections = [
+  {
+    title: 'Product',
+    links: [
+      { label: 'Features', href: '/features' },
+      { label: 'Pricing', href: '/pricing' },
+      { label: 'Documentation', href: '/docs' },
+      { label: 'About', href: '/about' },
+    ],
+  },
+  {
+    title: 'Resources',
+    links: [
+      { label: 'Getting Started', href: '/docs' },
+      { label: 'API Reference', href: '/docs#api' },
+      { label: 'Community', href: '#' },
+    ],
+  },
+  {
+    title: 'Support',
+    links: [
+      { label: 'Contact', href: 'mailto:support@dashcaddy.net' },
+      { label: 'Discord', href: '#' },
+      { label: 'Privacy Policy', href: '#' },
+      { label: 'Terms of Service', href: '#' },
+    ],
+  },
+];
+
+const socialLinks = [
+  {
+    icon: (
+      <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515a.074.074 0 00-.079.037c-.211.375-.444.864-.607 1.25a18.27 18.27 0 00-5.487 0c-.163-.386-.395-.875-.607-1.25a.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.873-1.295 1.226-1.994a.076.076 0 00-.042-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.294.075.075 0 01.078-.01c3.928 1.793 8.18 1.793 12.062 0a.075.075 0 01.079.009c.12.098.246.198.373.295a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.076.076 0 00-.041.107c.359.698.77 1.364 1.225 1.994a.077.077 0 00.084.028 19.839 19.839 0 006.002-3.03.076.076 0 00.032-.057c.534-4.506-.9-8.4-3.821-11.865a.055.055 0 00-.032-.027zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419z" />
+      </svg>
+    ),
+    label: 'Discord',
+    href: '#',
+  },
+];
+
+const CURRENT_YEAR = new Date().getFullYear();
+
 export default function Footer() {
-  const currentYear = new Date().getFullYear();
-
-  const footerSections = [
-    {
-      title: 'Product',
-      links: [
-        { label: 'Features', href: '/features' },
-        { label: 'Pricing', href: '/pricing' },
-        { label: 'Documentation', href: '/docs' },
-        { label: 'About', href: '/about' },
-      ],
-    },
-    {
-      title: 'Resources',
-      links: [
-        { label: 'Getting Started', href: '/docs' },
-        { label: 'API Reference', href: '/docs#api' },
-        { label: 'Community', href: '#' },
-      ],
-    },
-    {
-      title: 'Support',
-      links: [
-        { label: 'Contact', href: 'mailto:support@dashcaddy.net' },
-        { label: 'Discord', href: '#' },
-        { label: 'Privacy Policy', href: '#' },
-        { label: 'Terms of Service', href: '#' },
-      ],
-    },
-  ];
-
-  const socialLinks = [
-    {
-      icon: (
-        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
-          <path d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515a.074.074 0 00-.079.037c-.211.375-.444.864-.607 1.25a18.27 18.27 0 00-5.487 0c-.163-.386-.395-.875-.607-1.25a.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.873-1.295 1.226-1.994a.076.076 0 00-.042-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.294.075.075 0 01.078-.01c3.928 1.793 8.18 1.793 12.062 0a.075.075 0 01.079.009c.12.098.246.198.373.295a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.076.076 0 00-.041.107c.359.698.77 1.364 1.225 1.994a.077.077 0 00.084.028 19.839 19.839 0 006.002-3.03.076.076 0 00.032-.057c.534-4.506-.9-8.4-3.821-11.865a.055.055 0 00-.032-.027zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.948-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.948 2.419-2.157 2.419z" />
-        </svg>
-      ),
-      label: 'Discord',
-      href: '#',
-    },
-  ];
-
   return (
     <footer className="border-t border-surface-700/50 bg-surface-950">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-12">
@@ -112,7 +112,7 @@ export default function Footer() {
         <div className="border-t border-surface-700/50 pt-8">
           <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
             <p className="text-sm text-surface-500">
-              &copy; {currentYear} DashCaddy. All rights reserved. A product by
+              &copy; {CURRENT_YEAR} DashCaddy. All rights reserved. A product by
             </p>
             <Image
               src="/images/samiahmed7777-logo.png"
diff --git a/src/components/PricingCards.tsx b/src/components/PricingCards.tsx
index f159124..c5cb6e7 100644
--- a/src/components/PricingCards.tsx
+++ b/src/components/PricingCards.tsx
@@ -14,6 +14,13 @@ type Plan = {
   features: string[];
 };
 
+// Premium features shared across all paid plans
+const PREMIUM_FEATURES = [
+  'Auto-Login SSO',
+  'Recipes (multi-container stack deployment)',
+  'Docker Swarm orchestration'
+] as const;
+
 export default function PricingCards() {
   const [loadingPlan, setLoadingPlan] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
@@ -40,11 +47,7 @@ export default function PricingCards() {
       price: '$25',
       period: 'per month',
       description: 'Premium feature access for one month.',
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
     },
     {
       code: 'premium_3m',
@@ -54,11 +57,7 @@ export default function PricingCards() {
       savings: 'Best short-term value',
       description: 'A better value plan for regular use.',
       highlighted: true,
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
     },
     {
       code: 'premium_6m',
@@ -67,11 +66,7 @@ export default function PricingCards() {
       period: 'every 6 months',
       savings: 'Strong loyalty pricing',
       description: 'The commitment plan with aggressive value.',
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
     },
     {
       code: 'premium_12m',
@@ -80,11 +75,7 @@ export default function PricingCards() {
       period: 'per year',
       savings: 'Best overall value',
       description: 'The best-value annual Premium plan.',
-      features: [
-        'Auto-Login SSO',
-        'Recipes (multi-container stack deployment)',
-        'Docker Swarm orchestration'
-      ]
+      features: [...PREMIUM_FEATURES]
     }
   ], []);