Use clickable cards in the automations post

src/components/ClickableCard.astro

@@ -0,0 +1,45 @@
+---
+interface Props {
+	title: string;
+    link: string;
+}
+
+const { title, link } = Astro.props;
+---
+
+<div>
+    <a href={link}>
+        <p>{title}</p>
+    </a>
+</div>
+
+<style>
+    div {
+        border-radius: 12px;
+        padding: 10px;
+        margin: 10px;
+        background: linear-gradient(45deg, var(--accent), #9198e5);
+    }
+
+    div:hover {
+        background: linear-gradient(45deg, #9198e5, var(--accent));
+    }
+
+    a {
+        text-decoration: none;
+        color: white;
+    }
+
+    p {
+        font-size: x-large;
+        margin: 0;
+    }
+
+    /* If the system is in dark mode, use the light mode color */
+    @media (prefers-color-scheme: dark) {
+        a {
+            color: black;
+        }
+    }
+</style>
+

src/content/posts/how-to-use-automations.mdx

@@ -0,0 +1,34 @@
+---
+title: "Use Automations for making your own newsletters, reminders, and more"
+author: saba
+description: A brief tutorial on how to use Khoj's Automations feature
+tldr: ""
+heroImage: /nature_futurism.png
+pubDate: 2024-06-14
+---
+
+import ClickableCard from '../../components/ClickableCard.astro';
+
+## Using automations for unlocking productivity and well-being
+
+Automations help you get repetitive tasks out of the way and curate more personalized content to stay focused. 
+
+Automations is an experimental feature we've released that allows you to stay focused in your day by performing repetitive information lookups and queries on your behalf. The results are delivered straight to your inbox. These are super neat, because it's kind of like having someone working on your behalf while you get freed up to go live your life.
+
+![automation_example](/automation_bedtime_story.png)
+
+You can try any of these out. Your time zone will automatically be inferred from your location. You can send yourself a Preview message to see what the Khoj output would look like before you commit to the schedule.
+
+<ClickableCard title={"Give me a summary of the latest news about marine biology."} link={"https://app.khoj.dev/automations?subject=Latest%20Marine%20Biology%20News%20Summary&crontime=45%2010%20*%20*%200&queryToRun=Give%20me%20a%20summary%20of%20the%20latest%20news%20about%20marine%20biology"} />
+
+<ClickableCard title={"Paint me a watercolor image depicting mountains, nature, futurism. Take into account the weather."} link={"https://app.khoj.dev/automations?subject=Watercolor%20Painting%3A%20Mountains%2C%20Nature%2C%20and%20Futurism%20with%20Weather%20Consideration&crontime=00%209%20*%20*%206&queryToRun=Paint%20me%20a%20watercolor%20image%20depicting%20mountains%2C%20nature%2C%20futurism.%20Take%20into%20account%20the%20weather."} />
+
+<ClickableCard title={"Tell me about upcoming video game releases this month."} link={"https://app.khoj.dev/automations?subject=Upcoming%20Video%20Game%20Releases%20This%20Month&crontime=00%2010%201%20*%20*&queryToRun=Tell%20me%20about%20upcoming%20video%20game%20releases%20this%20month"} />
+
+<ClickableCard title={"Tell me if a Beyonce single dropped yesterday."} link={"https://app.khoj.dev/automations?subject=Beyonc%C3%A9%20Single%20Release%20Update&crontime=15%2010%20*%20*%20*&queryToRun=Tell%20me%20if%20a%20Beyonc%C3%A9%20single%20dropped%20yesterday"} />
+
+<ClickableCard title={"Based on your general knowledge, give me the name of a 90s hip hop song I should listen to. It should vary everyday."} link={"https://app.khoj.dev/automations?subject=Daily%2090s%20Hip%20Hop%20Song%20Recommendation&crontime=00%201%20*%20*%20*&queryToRun=Based%20on%20your%20general%20knowledge%2C%20give%20me%20the%20name%20of%20a%2090s%20hip%20hop%20song%20I%20should%20listen%20to.%20It%20should%20vary%20everyday."} />
+
+<ClickableCard title={"Make a bedtime story that I can read to my 3 year old. It should just be five paragraphs long."} link={"https://app.khoj.dev/automations?subject=Five-Paragraph%20Bedtime%20Story%20for%20a%203-Year-Old&crontime=30%209%20*%20*%20*&queryToRun=Make%20a%20bedtime%20story%20that%20I%20can%20read%20to%20my%203%20year%20old.%20It%20should%20just%20be%20five%20paragraphs%20long."} />
+
+<ClickableCard title={"Summarize market trends and forecast the week ahead for the Brazilian stock market."} link={"https://app.khoj.dev/automations?subject=Weekly%20Brazilian%20Stock%20Market%20Trends%20and%20Forecast&crontime=00%209%20*%20*%201&queryToRun=Summarize%20market%20trends%20and%20forecast%20the%20week%20ahead%20for%20the%20Brazilian%20stock%20market."} />