update hero piece

apps/formbricks-com/components/dummyUI/TemplateList.tsx

@@ -108,11 +108,10 @@ export default function TemplateList() {
   };
 
   const [activeTemplate, setActiveTemplate] = useState<Template | null>(onboardingSegmentation);
-  const [selectedFilter, setSelectedFilter] = useState("All");
-  const categories = [
-    "All",
-    ...(Array.from(new Set(templates.map((template) => template.category))) as string[]),
-  ];
+
+  const categories = [...(Array.from(new Set(templates.map((template) => template.category))) as string[])];
+
+  const [selectedFilter, setSelectedFilter] = useState(categories[0]);
 
   const customSurvey: Template = {
     name: "Custom Survey",
@@ -135,7 +134,7 @@ export default function TemplateList() {
 
   return (
     <div className="hidden h-full flex-col lg:flex">
-      <div className="relative z-0 flex flex-1 overflow-hidden">
+      <div className="z-0  flex min-h-[90vh] overflow-hidden">
         <main className="relative z-0 max-h-[90vh] flex-1 overflow-y-auto rounded-l-lg bg-slate-100 py-6 px-6 focus:outline-none dark:bg-slate-700">
           <div className="mb-6 flex space-x-2">
             {categories.map((category) => (

apps/formbricks-com/components/dummyUI/templateTypes.tsx

@@ -4,7 +4,7 @@ export interface Template {
   name: string;
   icon: any;
   description: string;
-  category?: "Product Management" | "Growth Marketing" | "Increase Revenue";
+  category?: "Popular" | "Product Management" | "Growth Marketing" | "Increase Revenue";
   preset: {
     name: string;
     questions: Question[];

apps/formbricks-com/components/dummyUI/templates.ts

@@ -21,7 +21,7 @@ export const templates: Template[] = [
   {
     name: "Onboarding Segmentation",
     icon: OnboardingIcon,
-    category: "Product Management",
+    category: "Popular",
     description: "Learn more about who signed up to your product and why.",
     preset: {
       name: "Onboarding Segmentation",
@@ -119,7 +119,7 @@ export const templates: Template[] = [
   {
     name: "Product Market Fit Survey",
     icon: PMFIcon,
-    category: "Product Management",
+    category: "Popular",
     description: "Measure PMF by assessing how disappointed users would be if your product disappeared.",
     preset: {
       name: "Product Market Fit Survey",
@@ -187,7 +187,7 @@ export const templates: Template[] = [
   {
     name: "Pre-Churn Survey",
     icon: CancelSubscriptionIcon,
-    category: "Increase Revenue",
+    category: "Popular",
     description: "Find out why people cancel you. These insights are pure gold!",
     preset: {
       name: "Churn Survey",

apps/formbricks-com/styles/globals.css

@@ -15,6 +15,7 @@
   }
 }
 
+/* Light mode (default) */
 /* Firefox */
 * {
   scrollbar-width: thin;
@@ -35,6 +36,27 @@
   border: 3px solid #cbd5e1;
 }
 
+/* Dark mode */
+.dark * {
+  /* Firefox */
+  scrollbar-width: thin;
+  scrollbar-color: #2d3748 #4a5568;
+}
+
+.dark *::-webkit-scrollbar {
+  /* Chrome, Edge, and Safari */
+  width: 10px;
+}
+
+.dark *::-webkit-scrollbar-track {
+  background: #2d3748; /* slate-800 */
+}
+
+.dark *::-webkit-scrollbar-thumb {
+  background-color: #4a5568; /* slate-700 */
+  border: 3px solid #4a5568;
+}
+
 .DocSearch-Input {
   @apply px-11 text-gray-900 bg-white;
 }