From ce226011d5fb53ea48f1f1500c43b7d263164a2e Mon Sep 17 00:00:00 2001
From: Arjun Patel <patel.arjun50@gmail.com>
Date: Sun, 6 Feb 2022 17:52:22 -0800
Subject: [PATCH] coming soon search

---
 .../FullPageExperiences/SearchResults.tsx     | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/packages/web/components/FullPageExperiences/SearchResults.tsx b/packages/web/components/FullPageExperiences/SearchResults.tsx
index 65a2c78..a5ec042 100644
--- a/packages/web/components/FullPageExperiences/SearchResults.tsx
+++ b/packages/web/components/FullPageExperiences/SearchResults.tsx
@@ -1,4 +1,5 @@
 import { useRouter } from "next/router";
+import { FaCheck } from "react-icons/fa";
 
 export default function SearchResults() {
   const router = useRouter();
@@ -7,7 +8,42 @@ export default function SearchResults() {
 
   return (
     <div className="mx-auto my-auto flex flex-col">
-      <span className="text-xs text-slate-400">0 results for {`"${q}"`}</span>
+      <span className="text-xs text-slate-400 text-center">
+        0 results for {`"${q}"`}
+      </span>
+
+      <span className="bg-slate-50 shadow-xl rounded p-10 m-10 flex flex-col items-start space-y-5">
+        <span className="uppercase text-lg tracking-widest text-slate-400 ">
+          Upgrade to Pro
+        </span>
+
+        <span className="flex flex-row items-center space-x-2">
+          <FaCheck className="text-emerald-500 text-lg" />
+          <span className="text-slate-500 text-lg">
+            Seamless search for conversations, drawer links, etc.
+          </span>
+        </span>
+        <span className="flex flex-row items-center space-x-2">
+          <FaCheck className="text-emerald-500 text-lg" />
+          <span className="text-slate-500 text-lg">
+            NLP technology to search based on what someone said.
+          </span>
+        </span>
+        <span className="flex flex-row items-center space-x-2">
+          <FaCheck className="text-emerald-500 text-lg" />
+          <span className="text-slate-500 text-lg">
+            View conversations from over 30 days ago.
+          </span>
+        </span>
+
+        <button
+          onClick={() => window.open("mailto:arjun@nirvana.com", "_blank")}
+          className="rounded-lg p-2 border border-teal-500 flex flex-row items-center space-x-2
+            text-xs bg-teal-500 hover:font-semibold mx-2 text-white mt-10 text-md font-semibold"
+        >
+          <span> Email Us</span>
+        </button>
+      </span>
     </div>
   );
 }