Merge pull request #23 from pattern-tech/feat/overview

feat: overview page

Author: mkermani144

components/overview.tsx

@@ -1,7 +1,7 @@
 import { motion } from 'framer-motion';
-import Link from 'next/link';
+import Image from 'next/image';
 
-import { MessageIcon, VercelIcon } from './icons';
+import { MessageIcon } from './icons';
 
 export const Overview = () => {
   return (
@@ -15,37 +15,20 @@ export const Overview = () => {
     >
       <div className="rounded-xl p-6 flex flex-col gap-8 leading-relaxed text-center max-w-xl">
         <p className="flex flex-row justify-center gap-4 items-center">
-          <VercelIcon size={32} />
+          <Image
+            /**
+             * FIXME: Handle light mode
+             * https://github.com/pattern-tech/pattern-app/issues/22
+             */
+            src="/images/logo-white.svg"
+            alt="Pattern"
+            width={32}
+            height={32}
+          />
           <span>+</span>
           <MessageIcon size={32} />
         </p>
-        <p>
-          This is an{' '}
-          <Link
-            className="font-medium underline underline-offset-4"
-            href="https://github.com/vercel/ai-chatbot"
-            target="_blank"
-          >
-            open source
-          </Link>{' '}
-          chatbot template built with Next.js and the AI SDK by Vercel. It uses
-          the{' '}
-          <code className="rounded-md bg-muted px-1 py-0.5">streamText</code>{' '}
-          function in the server and the{' '}
-          <code className="rounded-md bg-muted px-1 py-0.5">useChat</code> hook
-          on the client to create a seamless chat experience.
-        </p>
-        <p>
-          You can learn more about the AI SDK by visiting the{' '}
-          <Link
-            className="font-medium underline underline-offset-4"
-            href="https://sdk.vercel.ai/docs"
-            target="_blank"
-          >
-            docs
-          </Link>
-          .
-        </p>
+        <h1 className="text-xl">How can I help you?</h1>
       </div>
     </motion.div>
   );