Added Blog Page and Housekeeping

app/(main)/_components/footer.tsx

@@ -0,0 +1,21 @@
+import { Logo } from '@/components/logo';
+import { Button } from '@/components/ui/button';
+import Link from 'next/link';
+
+export const Footer = () => {
+  return (
+    <div className='fixed bottom-0 w-full border-t bg-slate-100 p-4'>
+      <div className='mx-auto flex w-full items-center justify-between md:max-w-screen-2xl'>
+        <Logo />
+        <div className='flex w-full items-center justify-between space-x-4 md:block md:w-auto'>
+          <Button className='italic' size='sm' variant='ghost'>
+            Privacy Policy - Temporarily Removed
+          </Button>
+          <Button className='italic' size='sm' variant='ghost'>
+            Terms of Service - Coming Soon
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};

app/(main)/_components/navbar.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+import { auth } from '@clerk/nextjs/server';
+
+import { Logo } from '@/components/logo';
+import { Button } from '@/components/ui/button';
+
+export const Navbar = async () => {
+  const { userId } = await auth();
+
+  let isSignedIn = !!userId;
+
+  return (
+    <div className='fixed top-0 flex h-14 w-full items-center border-b bg-white px-4 shadow-sm'>
+      <div className='mx-auto flex w-full items-center justify-between md:max-w-screen-2xl'>
+        <Logo />
+        <div className='ml-0 flex w-full flex-auto items-center space-x-1 md:ml-6 md:block md:w-auto md:space-x-4'>
+          <Button size='sm' variant='ghost' asChild>
+            <Link href='/blog'>Blog</Link>
+          </Button>
+          <Button size='sm' variant='ghost' asChild>
+            <Link href='https://tasko.mintlify.app/'>Docs</Link>
+          </Button>
+        </div>
+        <div className='flex w-full items-center justify-between space-x-4 md:block md:w-auto'>
+          {!isSignedIn ? (
+            <div className='flex w-full justify-between space-x-4 md:block md:w-auto'>
+              <Button size='sm' variant='outline' asChild>
+                <Link href='/sign-in'>Login</Link>
+              </Button>
+              <Button size='sm' asChild>
+                <Link href='/sign-up'>Get Tasko for Free</Link>
+              </Button>
+            </div>
+          ) : (
+            <div>
+              <Button size='sm' variant='outline' asChild>
+                <Link href='/select-org'>Dashboard</Link>
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

app/(main)/blog/page.tsx

@@ -0,0 +1,32 @@
+import { allBlogPosts } from 'content-collections';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const BlogPage = () => {
+  return (
+    <div className='ml-4 mr-4 flex flex-col items-center space-y-10'>
+      <h1 className='text-4xl font-semibold text-neutral-700'>Blog</h1>
+      <div className='grid grid-cols-2 gap-20 sm:grid-cols-3 lg:grid-cols-4'>
+        {allBlogPosts.map((post) => (
+          <div className='space-y-4 text-center' key={post._meta.path}>
+            <Link href={`blog/posts/${post._meta.path}`}>
+              <Image
+                src={post.coverImage}
+                height={100}
+                width={300}
+                alt='post cover image'
+                className='aspect-video w-full rounded-md object-cover'
+              />
+              <h2 className='text-lg font-semibold text-neutral-700'>
+                {post.title}
+              </h2>
+              <p className='text-sm text-neutral-500'>{post.summary}</p>
+            </Link>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BlogPage;

app/(main)/blog/posts/[post]/page.tsx

@@ -0,0 +1,40 @@
+import { MDXContent } from '@content-collections/mdx/react';
+import { allBlogPosts } from 'content-collections';
+import Image from 'next/image';
+
+interface PostPageProps {
+  params: Promise<{ post: string }>;
+}
+
+const PostPage = async (props: PostPageProps) => {
+  const params = await props.params;
+  const post = allBlogPosts.find((post) => post._meta.path === params.post);
+
+  if (!post) {
+    return (
+      <h1 className='text-6xl font-semibold text-neutral-900'>
+        Post not found
+      </h1>
+    );
+  }
+
+  return (
+    <div className='mx-auto p-4 md:p-6 lg:p-8'>
+      <Image
+        className='mb-2 h-64 w-full rounded-md object-cover md:h-[500px]'
+        src={post.coverImage}
+        width={1200}
+        height={600}
+        alt='post cover image'
+      />
+      <h1 className='mb-12 text-center text-6xl font-bold text-neutral-900'>
+        {post.title}
+      </h1>{' '}
+      <div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl dark:prose-headings:text-white'>
+        <MDXContent code={post.mdx} />
+      </div>
+    </div>
+  );
+};
+
+export default PostPage;

app/(main)/blog/posts/blog-welcome.mdx

@@ -0,0 +1,14 @@
+---
+title: 'Welcome to the Blog!'
+summary: 'Welcome to our new blog page!'
+coverImage: '/hero.svg'
+datePublished: ''
+---
+
+## Welcome!
+
+Hello and welcome to our new blog page! We are so exited to finally have a place to share updates and news about our app.
+
+## What's next?
+
+As you can see, although we have a blog page, it's a bit basic at the moment. In the future, we are planning to add things such as tags and dates as well as other stuff. In terms of the website it's self, we have a few major feates that we plan to add in the comming months.

app/(main)/layout.tsx

@@ -0,0 +1,18 @@
+import { Footer } from './_components/footer';
+import { Navbar } from './_components/navbar';
+
+const MarketingLayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className='h-full bg-slate-100'>
+      <meta
+        name='google-site-verification'
+        content='PRxg9VJRF6bNC8Gn2foGdrSvXjqihsgL4w9HPTt5nVk'
+      />
+      <Navbar />
+      <main className='bg-slate-100 pb-20 pt-40'>{children}</main>
+      <Footer />
+    </div>
+  );
+};
+
+export default MarketingLayout;

app/(main)/page.tsx

@@ -0,0 +1,53 @@
+import { Medal } from 'lucide-react';
+import localFont from 'next/font/local';
+import { Poppins } from 'next/font/google';
+import Link from 'next/link';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+
+const headingFont = localFont({ src: '../../public/fonts/font.woff2' });
+
+const textFont = Poppins({
+  subsets: ['latin'],
+  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+});
+
+const MarketingPage = () => {
+  return (
+    <div className='flex flex-col items-center justify-center'>
+      <div
+        className={cn(
+          'flex flex-col items-center justify-center',
+          headingFont.className
+        )}
+      >
+        <div className='mb-4 flex items-center rounded-full border bg-amber-100 p-4 uppercase text-amber-700 shadow-sm'>
+          <Medal className='mr-2 h-6 w-6' />
+          No 1 task management app
+        </div>
+        <h1 className='mb-6 text-center text-3xl text-neutral-800 md:text-6xl'>
+          Tasko helps teams move
+        </h1>
+        <div className='w-fit rounded-md bg-gradient-to-r from-fuchsia-600 to-pink-600 p-2 px-4 pb-4 text-3xl text-white md:text-6xl'>
+          Work forward
+        </div>
+      </div>
+      <div
+        className={cn(
+          'mx-auto mt-4 max-w-xs text-center text-sm text-neutral-400 md:max-w-2xl md:text-xl',
+          textFont.className
+        )}
+      >
+        Collaborate, manage projects, and reach new productivity peaks. From
+        high rises to the home office, the way your team works is unique -
+        accomplish it all with Tasko.
+      </div>
+      <Button className='mt-6' size='lg' asChild>
+        <Link href='/sign-up'>Get Tasko for free</Link>
+      </Button>
+    </div>
+  );
+};
+
+export default MarketingPage;