Updated example ideas.

wasp-ai/src/client/components/ExampleCard.jsx

@@ -13,7 +13,7 @@ export function ExampleCard({ idea, useIdea }) {
         className="bg-slate-50 p-8 rounded-xl mt-2 flex flex-col items-center cursor-pointer hover:shadow-lg transition-all"
         onClick={() => useIdea(idea)}
       >
-        <div className="idea">
+        <div className="idea w-full">
           <div className="flex justify-between items-center mb-4">
             <h4 className="text-xl font-semibold text-slate-700 mb-1">
               <span
@@ -24,9 +24,9 @@ export function ExampleCard({ idea, useIdea }) {
             </h4>
             <button className="button sm gray">Use this idea</button>
           </div>
-          <p className="text-base leading-relaxed text-slate-500">
-            {idea.description}
-          </p>
+          <div className="text-base leading-relaxed text-slate-500">
+            {idea.description.split('\n').map(str => <p>{str}</p>)}
+          </div>
         </div>
       </div>
     </Tilt>

wasp-ai/src/client/examples.ts

@@ -1,30 +1,36 @@
 import { availableColors } from "./components/Color";
 
-export const poolOfExampleIdeas = [
+export const exampleIdeas = [
   {
     name: "TodoApp",
     description:
-      "A simple todo app with one main page that lists all the tasks. I can create new tasks, or toggle existing ones. " +
-      "User owns tasks. User can only see and edit their own tasks. Tasks are saved in the database.",
+      "A simple todo app with one main page that lists all the tasks." +
+      " User can create new tasks by providing their description, toggle existing ones, or edit their description." +
+      " User owns tasks. User can only see and edit their own tasks. Tasks are saved in the database.",
     color: availableColors.find((color) => color.name === "rose"),
   },
+  {
+    name: "MyPlants",
+    description:
+      "A simple app where user can track their plants and their watering schedule."
+      + "\nHome page should list all of the users plants, and show for each one how many days are left until it needs to be watered."
+      + "\nFor each plant, there should also be a 'Water' button, that resets the watering schedule for that plant."
+      + "\nHome page should also have a 'Create new plant' button, that takes you to a new page where you can create a new plant."
+      + "\nWhen creating a new plant, user should give it a name, and specify how often it needs to be watered (in the number of days)."
+      + "Plants are saved in the database. User can access only their own plants. User needs to be logged in to access the app.",
+    color: availableColors.find((color) => color.name === "green"),
+  },
   {
     name: "Blog",
     description:
-      "A blog with posts and comments. Posts can be created, edited and deleted. Comments can be created and deleted. Posts and comments are saved in the database.",
+      "A blog with posts and post comments. Posts can be created, edited and deleted. Comments can be created. Posts and comments are saved in the database."
+      + "\nUser owns posts and comments. Everybody can see all posts and comments, but only the owner can edit or delete them."
+      + "\nHome page lists all posts (their titles and authors) and is accessible by anybody. It also has a 'Create new post' button, that only logged in users can see."
+      + " It has a 'Log in' button, that only logged out users can see."
+      + "\nThere is a second page, to which 'Create new post' button takes you, for creating / editing a post. Only post author can access it."
+      + "\nFinally, there is a third page, for viewing individual post in details, to which you are taken by clicking on the post on the home page."
+      + "\nAnybody can access this page. It also lists all post comments, and logged-in users can add new comments."
+      ,
     color: availableColors.find((color) => color.name === "amber"),
-  },
-  {
-    name: "FlowerShop",
-    description:
-      "A flower shop with a main page that lists all the flowers. I can create new flowers, or 'water' existing ones. " +
-      "User owns flowers. User can only see and edit their own flowers. Flowers are saved in the database.",
-    color: availableColors.find((color) => color.name === "emerald"),
-  },
-  {
-    name: "WeatherApp",
-    description:
-      "Build a simple app that uses the browser to get the current user's location. It then fetches the current weather. It uses the Open Weather API on the backend",
-    color: availableColors.find((color) => color.name === "sky"),
-  },
+  }
 ];

wasp-ai/src/client/pages/MainPage.jsx

@@ -5,7 +5,7 @@ import { MyDropdown } from "../components/Dropdown";
 import { ExampleCard } from "../components/ExampleCard";
 import { Header } from "../components/Header";
 import { availableColors } from "../components/Color";
-import { poolOfExampleIdeas } from "../examples";
+import { exampleIdeas } from "../examples";
 import { PiMagicWandDuotone } from "react-icons/pi";
 
 const MainPage = () => {
@@ -69,13 +69,6 @@ const MainPage = () => {
     }
   }
 
-  // Pick random 3 ideas
-  const ideasToDisplay = useMemo(
-    () =>
-      poolOfExampleIdeas.sort(() => Math.random() - Math.random()).slice(0, 3),
-    []
-  );
-
   function useIdea(idea) {
     setAppName(idea.name);
     setAppDesc(idea.description);
@@ -166,7 +159,7 @@ Based on it, our AI code agent will then generate a full stack web app in Wasp,
           Some example ideas
         </h3>
         <div className="grid grid-cols-1 gap-2 lg:grid-cols-3 lg:gap-4">
-          {ideasToDisplay.map((idea) => (
+          {exampleIdeas.map((idea) => (
             <ExampleCard key={idea.name} idea={idea} useIdea={useIdea} />
           ))}
         </div>

wasp-ai/src/client/pages/StatsPage.jsx

@@ -7,7 +7,7 @@ import { format } from "timeago.js";
 import { StatusPill } from "../components/StatusPill";
 import { BarChart } from "../components/BarChart";
 import ParentSize from "@visx/responsive/lib/components/ParentSize";
-import { poolOfExampleIdeas } from "../examples";
+import { exampleIdeas } from "../examples";
 import logout from "@wasp/auth/logout";
 import { WaspIcon } from "../components/WaspIcon";
 import { Header } from "../components/Header";
@@ -59,7 +59,7 @@ export function Stats() {
     if (filterOutExampleApps) {
       filters.push(
         (stat) =>
-          !poolOfExampleIdeas.some(
+          !exampleIdeas.some(
             (example) =>
               example.name === stat.name &&
               example.description === stat.description