website / Fix broken links, slow loading, and prod errors (#5932)

The code is in a bad state, this is just fixing it but not improving the
structure

packages/twenty-website/src/app/_components/docs/AlgoliaDocSearch.tsx

@@ -47,8 +47,8 @@ export const AlgoliaDocSearch = ({ pathname }: AlgoliaDocSearchProps) => {
           </a>
         </section>
       )}
-      appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID as string}
-      apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY as string}
+      appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}
+      apiKey={process.env.NEXT_PUBLIC_ALGOLIA_API_KEY ?? ''}
       indexName={`twenty-${indexName}`}
     />
   );

packages/twenty-website/src/app/_components/docs/DocsCard.tsx

@@ -1,12 +1,14 @@
 'use client';
 import styled from '@emotion/styled';
-import { usePathname, useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 
 import { Theme } from '@/app/_components/ui/theme/theme';
 import { DocsArticlesProps } from '@/content/user-guide/constants/getDocsArticles';
 import { getCardPath } from '@/shared-utils/getCardPath';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled(Link)`
+  text-decoration: none;
   color: ${Theme.border.color.plain};
   border: 2px solid ${Theme.border.color.plain};
   border-radius: ${Theme.border.radius.md};
@@ -58,13 +60,12 @@ export default function DocsCard({
   card: DocsArticlesProps;
   isSection?: boolean;
 }) {
-  const router = useRouter();
   const pathname = usePathname();
   const path = getCardPath(card, pathname, isSection);
 
   if (card.title) {
     return (
-      <StyledContainer onClick={() => router.push(path)}>
+      <StyledContainer href={path}>
         <StyledImage src={card.image} alt={card.title} />
         <StyledHeading>{card.title}</StyledHeading>
         <StyledSubHeading>{card.info}</StyledSubHeading>

packages/twenty-website/src/app/_components/docs/DocsContent.tsx

@@ -149,6 +149,7 @@ export default function DocsContent({ item }: { item: FileContent }) {
                 style={{ objectFit: 'cover' }}
                 onLoad={() => setImageLoaded(true)}
                 loaded={imageLoaded.toString()}
+                unoptimized
               />
             )}
           </StyledImageContainer>