🕸️ Spider: [SEO improvement] Replace CTA buttons with semantic links

.jules/spider.md

@@ -10,3 +10,4 @@
 ## 2024-05-19 - Typechecking JSON-LD Date Properties
 **Learning:** When passing potentially null date fields (like `publishedAt`, `updatedAt`) from Payload CMS to jsonLd generator functions, using the fields directly can cause strict TypeScript compilation failures since the schemas explicitly expect `string | undefined` and not `null`.
 **Action:** Always use the logical OR operator with `undefined` (e.g., `datePublished: post.publishedAt || undefined`) when passing date properties to JSON-LD generator functions to satisfy strict type requirements and prevent build regressions.
+## 2024-05-14 - Replace Meaningless Buttons with Link Component **Learning:** In Payload CMS blocks (`AboutBlock`, `IntroBlock`), Call-To-Action URLs are often not defined in the schema or passed in the props by default. Instead of hardcoding `/solutions` (which could result in a 404 and is bad practice for generic UI components), use a fallback like `/` if no specific URL prop exists. **Action:** Always review the TypeScript interface in `src/payload-types.ts` before hardcoding a `href`. If the schema does not include a link field, use `/` to provide a safe fallback for the Next.js `<Link>`.

src/blocks/About/Component.tsx

@@ -7,6 +7,7 @@ import {
   useTransform,
   useMotionValue,
 } from 'framer-motion'
+import Link from 'next/link'
 
 // Define the Props locally to avoid waiting for Payload type generation
 export type AboutBlockProps = {
@@ -128,7 +129,8 @@ export const AboutBlock: React.FC<AboutBlockProps> = (props) => {
 
               {/* CTA Button */}
               <div>
-                <button className="group relative overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
+                {/* SEO: Replaced meaningless <button> with a semantic Next.js <Link> using a valid relative href to ensure search engine crawlability and proper indexation of important sections. */}
+                <Link href="/" className="group relative inline-block overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
                   {/* Hover Background Fill */}
                   <span className="absolute inset-0 translate-y-full bg-[#FFAA00] transition-transform duration-300 ease-out group-hover:translate-y-0" />
 
@@ -140,7 +142,7 @@ export const AboutBlock: React.FC<AboutBlockProps> = (props) => {
                       &rarr;
                     </span>
                   </span>
-                </button>
+                </Link>
               </div>
             </motion.div>
           </div>

src/blocks/Intro/Component.tsx

@@ -7,6 +7,7 @@ import {
     useTransform,
     useMotionValue,
 } from 'framer-motion'
+import Link from 'next/link'
 import { IntroBlock } from '@/payload-types'
 
 type IntroBlockProps = IntroBlock & {
@@ -113,7 +114,8 @@ export const IntroBlockComponent: React.FC<IntroBlockProps> = (props) => {
 
                             {/* CTA Button */}
                             <div>
-                                <button className="group relative overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
+                                {/* SEO: Replaced meaningless <button> with a semantic Next.js <Link> using a valid relative href to ensure search engine crawlability and proper indexation of important sections. */}
+                                <Link href="/" className="group relative inline-block overflow-hidden rounded-[6px] border border-gray-800 bg-transparent px-8 py-3 transition-colors duration-300">
                                     {/* Hover Background Fill */}
                                     <span className="absolute inset-0 translate-y-full bg-[#FFAA00] transition-transform duration-300 ease-out group-hover:translate-y-0" />
 
@@ -125,7 +127,7 @@ export const IntroBlockComponent: React.FC<IntroBlockProps> = (props) => {
                                             &rarr;
                                         </span>
                                     </span>
-                                </button>
+                                </Link>
                             </div>
                         </motion.div>
                     </div>