Marketing website POC (#3139)

First website POC

packages/twenty-website/src/app/emotion-root-style-registry.js

@@ -0,0 +1,47 @@
+'use client'
+
+import { CacheProvider } from '@emotion/react'
+import createCache from '@emotion/cache'
+import { useServerInsertedHTML } from 'next/navigation'
+import { useState } from 'react'
+
+export default function RootStyleRegistry({ children }) {
+  const [{ cache, flush }] = useState(() => {
+    const cache = createCache({ key: 'emotion-cache' })
+    cache.compat = true
+    const prevInsert = cache.insert
+    let inserted = []
+    cache.insert = (...args) => {
+      const serialized = args[1]
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name)
+      }
+      return prevInsert(...args)
+    }
+    const flush = () => {
+      const prevInserted = inserted
+      inserted = []
+      return prevInserted
+    }
+    return { cache, flush }
+  })
+
+  useServerInsertedHTML(() => {
+    const names = flush()
+    if (names.length === 0) return null
+    let styles = ''
+    for (const name of names) {
+      styles += cache.inserted[name]
+    }
+    return (
+      <style
+        data-emotion={`${cache.key} ${names.join(' ')}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    )
+  })
+
+  return <CacheProvider value={cache}>{children}</CacheProvider>
+}