Added Algolia Search (#5524)

-Added Algolia Search Box :

<img width="707" alt="Screenshot 2024-05-22 at 10 05 13"
src="https://github.com/twentyhq/twenty/assets/102751374/d26f9748-2a80-4690-88ca-16b078c52915">

-Added Algolia Search Bar:

<img width="294" alt="Screenshot 2024-05-22 at 10 05 56"
src="https://github.com/twentyhq/twenty/assets/102751374/ad503894-4ae1-41e4-bd4b-6241f7679142">

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>

packages/twenty-website/src/content/user-guide/api-webhooks.mdx

@@ -26,7 +26,7 @@ Since your API key gives access to sensitive information, you shouldn't share it
 <div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px' }}>
   <iframe 
     src="https://player.vimeo.com/video/928786722?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -62,7 +62,7 @@ For instance, a webhook can alert your system in real-time when someone creates
 <div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/928786708?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/create-workspace.mdx

@@ -14,7 +14,7 @@ image: /images/user-guide/create-workspace/workspace-cover.png
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927066829?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/fields.mdx

@@ -41,7 +41,7 @@ Your newly created field is now available within the application's fields. To di
 <div style={{padding:'71.15% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927628219?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/import-export-data.mdx

@@ -26,7 +26,7 @@ To export data from an object:
 <div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/926226303?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/integrations.mdx

@@ -24,7 +24,7 @@ Sync Twenty with 3000+ apps using <ArticleLink href="https://zapier.com/apps/twe
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927913866?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/kanban-views.mdx

@@ -16,7 +16,7 @@ Kanban views visually map out process flows, where each column stands for a dist
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927888627?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -43,7 +43,7 @@ To add a stage, access the Select Field Settings by navigating to Settings > Dat
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927890428?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/notes.mdx

@@ -32,7 +32,7 @@ You can also change the background color and text color of each block to highlig
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927896302?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/objects.mdx

@@ -40,7 +40,7 @@ To create a new custom object:
 <div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/926288174?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -61,7 +61,7 @@ To create a new custom object:
 <div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/926293493?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/table-views.mdx

@@ -18,7 +18,7 @@ Enter the record name then press `Enter` to save. To edit a record name, click o
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927071691?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -45,7 +45,7 @@ Enter the record name then press `Enter` to save. To edit a record name, click o
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927073570?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/tasks.mdx

@@ -17,7 +17,7 @@ Creating tasks in Twenty is seamless. You can either:
 <div style={{padding:'70.59% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/928786754?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -49,7 +49,7 @@ You can also see tasks for a given Record on its `Record page`.
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927908280?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -86,7 +86,7 @@ This procedure will help keep an updated record of your accomplishments.
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927910083?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/tips.mdx

@@ -16,7 +16,7 @@ Workspace admins can edit its name and logo in settings.
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927915481?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -43,7 +43,7 @@ Select **Dark**. The system will automatically save your changes.
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927916570?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',

packages/twenty-website/src/content/user-guide/views-sort-filter.mdx

@@ -36,7 +36,7 @@ The newly created view opens automatically.
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927639721?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -59,7 +59,7 @@ When you change the `Sorting` and `Filtering` of an existing view, a `Save as ne
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927643495?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -88,7 +88,7 @@ You will then be able to modify the view. To delete it, press the `Delete` butto
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927645774?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -124,7 +124,7 @@ To filter a view:
 <div style={{padding:'71.24% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/926282262?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',
@@ -148,7 +148,7 @@ Order your fields data in ascending or descending order:
 <div style={{padding:'69.01% 0 0 0', position:'relative', margin: '32px 0px 0px'}}>
   <iframe 
     src="https://player.vimeo.com/video/927885588?autoplay=1&loop=1&autopause=0&background=1&amp;app_id=58479" 
-    frameborder="0" 
+    frameBorder="0" 
     allow="autoplay; fullscreen; picture-in-picture; clipboard-write" 
     style={{
       position:'absolute',