landing page added

package.json

@@ -30,6 +30,7 @@
     "next": "^13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-youtube": "^10.1.0",
     "superjson": "1.12.2",
     "zod": "^3.21.4"
   },

pnpm-lock.yaml

@@ -61,6 +61,9 @@ dependencies:
   react-dom:
     specifier: 18.2.0
     version: 18.2.0(react@18.2.0)
+  react-youtube:
+    specifier: ^10.1.0
+    version: 10.1.0(react@18.2.0)
   superjson:
     specifier: 1.12.2
     version: 1.12.2
@@ -2368,6 +2371,10 @@ packages:
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
 
+  /load-script@1.0.0:
+    resolution: {integrity: sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==}
+    dev: false
+
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
     engines: {node: '>=10'}
@@ -2958,6 +2965,20 @@ packages:
       react: 18.2.0
     dev: false
 
+  /react-youtube@10.1.0(react@18.2.0):
+    resolution: {integrity: sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==}
+    engines: {node: '>= 14.x'}
+    peerDependencies:
+      react: '>=0.14.1'
+    dependencies:
+      fast-deep-equal: 3.1.3
+      prop-types: 15.8.1
+      react: 18.2.0
+      youtube-player: 5.5.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /react@18.2.0:
     resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
     engines: {node: '>=0.10.0'}
@@ -3079,6 +3100,10 @@ packages:
       object-inspect: 1.12.3
     dev: true
 
+  /sister@3.0.2:
+    resolution: {integrity: sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==}
+    dev: false
+
   /slash@3.0.0:
     resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
     engines: {node: '>=8'}
@@ -3496,6 +3521,16 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /youtube-player@5.5.2:
+    resolution: {integrity: sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==}
+    dependencies:
+      debug: 2.6.9
+      load-script: 1.0.0
+      sister: 3.0.2
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /zod@3.21.4:
     resolution: {integrity: sha512-m46AKbrzKVzOzs/DZgVnG5H55N1sv1M8qZU3A8RIKbs3mrACDNeIOeilDymVb2HdmP8uwshOCF4uJ8uM9rCqJw==}
     dev: false

py_server/handlers/chat.py

@@ -64,8 +64,8 @@ async def chat_app_handler(body: ChatAppBody, jwt: str):
 
         messages = [
             SystemMessagePromptTemplate.from_template("""You are PageAssist bot. Use the following pieces of context from this webpage to answer the question from the user.
-If you don't know the answer, just say you don't know. DO NOT try to make up an answer.
 If user want recommendation, help from the context, or any other information, please provide it.
+If you don't know the answer, just say you don't know. DO NOT try to make up an answer.
 If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context. Helpful answer in markdown:
 -----------------
 {context}
@@ -133,8 +133,8 @@ async def chat_extension_handler(body: ChatBody):
 
         messages = [
             SystemMessagePromptTemplate.from_template("""You are PageAssist bot. Use the following pieces of context from this webpage to answer the question from the user.
-If you don't know the answer, just say you don't know. DO NOT try to make up an answer.
 If user want recommendation, help from the context, or any other information, please provide it.
+If you don't know the answer, just say you don't know. DO NOT try to make up an answer.
 If the question is not related to the context, politely respond that you are tuned to only answer questions that are related to the context. Helpful answer in markdown:
 -----------------
 {context}

src/components/Landing/Hero.tsx

@@ -0,0 +1,204 @@
+import { Fragment } from "react";
+import { Popover, Transition } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { useUser } from "@supabase/auth-helpers-react";
+import YouTube from "react-youtube";
+
+export default function Hero() {
+  const user = useUser();
+
+  return (
+    <div>
+      <div className="relative overflow-hidden">
+        <div className="relative pb-16 pt-6 sm:pb-24">
+          <Popover>
+            <div className="mx-auto max-w-7xl px-4 sm:px-6">
+              <nav
+                className="relative flex items-center justify-between sm:h-10 md:justify-center"
+                aria-label="Global"
+              >
+                <div className="flex flex-1 items-center md:absolute md:inset-y-0 md:left-0">
+                  <div className="flex w-full items-center justify-between md:w-auto">
+                    <Link href="/">
+                      <span className="sr-only">Feedback Board</span>
+                      <img
+                        className="h-8 w-auto sm:h-10"
+                        src="/logo.png"
+                        alt="Feedback Board"
+                      />
+                    </Link>
+                    <div className="-mr-2 flex items-center md:hidden">
+                      <Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-50 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500">
+                        <span className="sr-only">Open main menu</span>
+                        <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+                      </Popover.Button>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="hidden md:absolute md:inset-y-0 md:right-0 md:flex md:items-center md:justify-end">
+                  <span className="inline-flex rounded-md shadow">
+                    {user ? (
+                      <Link
+                        href="/dashboard"
+                        className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                      >
+                        Dashboard
+                      </Link>
+                    ) : (
+                      <Link
+                        href="/auth"
+                        className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                      >
+                        Login
+                      </Link>
+                    )}
+                  </span>
+                </div>
+              </nav>
+            </div>
+
+            <Transition
+              as={Fragment}
+              enter="duration-150 ease-out"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="duration-100 ease-in"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Popover.Panel
+                focus
+                className="absolute inset-x-0 top-0 z-10 origin-top-right transform p-2 transition md:hidden"
+              >
+                <div className="overflow-hidden rounded-lg bg-white shadow-md ring-1 ring-black ring-opacity-5">
+                  <div className="flex items-center justify-between px-5 pt-4">
+                    <div>
+                      <img
+                        className="h-8 w-auto"
+                        src="/logo.png"
+                        alt="PageAssist"
+                      />
+                    </div>
+                    <div className="-mr-2">
+                      <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-sky-500">
+                        <span className="sr-only">Close main menu</span>
+                        <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                      </Popover.Button>
+                    </div>
+                  </div>
+                  {user ? (
+                    <Link
+                      href="/dashboard"
+                      className="m-3 inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    >
+                      Account
+                    </Link>
+                  ) : (
+                    <Link
+                      href="/auth"
+                      className="m-3 inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    >
+                      Login
+                    </Link>
+                  )}
+                </div>
+              </Popover.Panel>
+            </Transition>
+          </Popover>
+          <div className="py-24 sm:py-32 lg:pb-40">
+            <div className="mx-auto max-w-7xl px-6 lg:px-8">
+              <div className="mx-auto max-w-2xl text-center">
+                <h1 className="text-2xl font-bold tracking-tight text-gray-900 sm:text-5xl">
+                  Chat with Any Webpage using PageAssist
+                </h1>
+                <p className="mt-6 text-lg leading-8 text-gray-600">
+                  Revolutionize your browsing experience with PageAssist, an
+                  open source Chrome extension that allows you to easily chat
+                  with any webpage using the power of ChatGPT API.
+                </p>
+                <div className="mt-10 flex items-center justify-center gap-x-6">
+                  <a
+                    href="https://chrome.google.com/webstore/detail/page-assist/ehkjdalbpmmaddcfdilplgknkgepeakd?hl=en&authuser=2"
+                    className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  >
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="-ml-0.5 mr-2 h-4 w-4"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                    >
+                      <circle cx="12" cy="12" r="10"></circle>
+                      <circle cx="12" cy="12" r="4"></circle>
+                      <path d="M21.17 8L12 8"></path>
+                      <path d="M3.95 6.06L8.54 14"></path>
+                      <path d="M10.88 21.94L15.46 14"></path>
+                    </svg>
+                    Install Now
+                  </a>
+                  <a
+                    href="https://github.com/n4ze3m/page-assist"
+                    className="inline-flex items-center text-base font-semibold leading-7 text-gray-900 "
+                  >
+                    Star on GitHub
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="ml-2 h-4 w-4"
+                      fill="none"
+                      stroke="currentColor"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth="2"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M15 22v-4a4.8 4.8 0 00-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 004 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4M9 18c-4.51 2-5-2-7-2"></path>
+                    </svg>
+                  </a>
+                </div>
+              </div>
+              <iframe
+                className="yt-video relative mx-auto mt-12 w-full max-w-4xl rounded-3xl border border-gray-300 shadow-2xl dark:border-gray-700 lg:mt-20"
+                src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+                title="YouTube video player"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowFullScreen
+                frameBorder={0}
+              />
+
+              <div className="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]">
+                <svg
+                  className="relative left-[calc(50%+3rem)] h-[21.1875rem] max-w-none -translate-x-1/2 sm:left-[calc(50%+36rem)] sm:h-[42.375rem]"
+                  viewBox="0 0 1155 678"
+                >
+                  <path
+                    fill="url(#b9e4a85f-ccd5-4151-8e84-ab55c66e5aa1)"
+                    fillOpacity=".3"
+                    d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
+                  />
+                  <defs>
+                    <linearGradient
+                      id="b9e4a85f-ccd5-4151-8e84-ab55c66e5aa1"
+                      x1="1155.49"
+                      x2="-78.208"
+                      y1=".177"
+                      y2="474.645"
+                      gradientUnits="userSpaceOnUse"
+                    >
+                      <stop stopColor="#9089FC" />
+                      <stop offset={1} stopColor="#FF80B5" />
+                    </linearGradient>
+                  </defs>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/index.tsx

@@ -1,53 +1,45 @@
 import { type NextPage } from "next";
 import Head from "next/head";
 import Link from "next/link";
-
+import Hero from "~/components/Landing/Hero";
-import { api } from "~/utils/api";
 
 const Home: NextPage = () => {
-  const hello = api.example.hello.useQuery({ text: "from tRPC" });
-
   return (
     <>
       <Head>
-        <title>Create T3 App</title>
+        <title>PageAssist</title>
-        <meta name="description" content="Generated by create-t3-app" />
+        <link rel="icon" href="/logo.png" />
-        <link rel="icon" href="/favicon.ico" />
       </Head>
-      <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+      <div className="isolate bg-white">
-        <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
+        <div className="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]">
-          <h1 className="text-5xl font-extrabold tracking-tight text-white sm:text-[5rem]">
+          <svg
-            Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
+            className="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]"
-          </h1>
+            viewBox="0 0 1155 678"
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
+          >
-            <Link
+            <path
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
+              fill="url(#9b2541ea-d39d-499b-bd42-aeea3e93f5ff)"
-              href="https://create.t3.gg/en/usage/first-steps"
+              fillOpacity=".3"
-              target="_blank"
+              d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z"
-            >
+            />
-              <h3 className="text-2xl font-bold">First Steps →</h3>
+            <defs>
-              <div className="text-lg">
+              <linearGradient
-                Just the basics - Everything you need to know to set up your
+                id="9b2541ea-d39d-499b-bd42-aeea3e93f5ff"
-                database and authentication.
+                x1="1155.49"
-              </div>
+                x2="-78.208"
-            </Link>
+                y1=".177"
-            <Link
+                y2="474.645"
-              className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 text-white hover:bg-white/20"
+                gradientUnits="userSpaceOnUse"
-              href="https://create.t3.gg/en/introduction"
+              >
-              target="_blank"
+                <stop stopColor="#9089FC" />
-            >
+                <stop offset={1} stopColor="#023e8a" />
-              <h3 className="text-2xl font-bold">Documentation →</h3>
+              </linearGradient>
-              <div className="text-lg">
+            </defs>
-                Learn more about Create T3 App, the libraries it uses, and how
+          </svg>
-                to deploy it.
-              </div>
-            </Link>
-          </div>
-          <p className="text-2xl text-white">
-            {hello.data ? hello.data.greeting : "Loading tRPC query..."}
-          </p>
         </div>
-      </main>
+        <Hero />
+        
+      </div>
+
     </>
   );
 };

src/styles/globals.css

@@ -1,3 +1,20 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+
+.yt-video {
+    height: 500px;
+}
+
+@media screen and (max-width: 768px) {
+    .yt-video {
+        height: 300px;
+    }
+}
+
+@media screen and (max-width: 480px) {
+    .yt-video {
+        height: 200px;
+    }
+}