✨ Add Näak product recommendation template

Closes #548

apps/builder/src/features/templates/components/TemplatesModal.tsx

@@ -27,7 +27,7 @@ type Props = {
 }
 
 export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
-  const templateCardBackgroundColor = useColorModeValue(undefined, 'gray.800')
+  const templateCardBackgroundColor = useColorModeValue('white', 'gray.800')
   const [typebot, setTypebot] = useState<Typebot>()
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateProps>(
     templates[0]
@@ -197,7 +197,7 @@ export const TemplatesModal = ({ isOpen, onClose, onTypebotChoose }: Props) => {
             spacing="4"
             align="center"
             pb="4"
-            bgColor="white"
+            bgColor={selectedTemplate.backgroundColor ?? 'white'}
           >
             {typebot && (
               <Standard

apps/builder/src/features/templates/data.ts

@@ -41,6 +41,15 @@ export const templates: TemplateProps[] = [
     description:
       'Provide a free content to your prospects in exchange for their contact information.',
   },
+  {
+    name: 'Product recommendation',
+    emoji: '🍫',
+    fileName: 'product-recommendation.json',
+    category: 'marketing',
+    description:
+      'Näak is a company that sells energy bars, hydration mix and recovery prodcuts. This bot helps a visitor choosing the right product. It helps you qualify your lead and provide a personalized recommendation.',
+    backgroundColor: '#010000',
+  },
   {
     name: 'NPS Survey',
     emoji: '⭐',

apps/builder/src/features/templates/types.ts

@@ -6,4 +6,5 @@ export type TemplateProps = {
   category?: 'marketing' | 'product'
   isComingSoon?: boolean
   isNew?: boolean
+  backgroundColor?: string
 }