dev -> main

package.json

@@ -32,6 +32,7 @@
     "@bigcommerce/big-design-icons": "^0.23.2",
     "@bigcommerce/big-design-theme": "^0.19.2",
     "@google-ai/generativelanguage": "^0.2.1",
+    "@headlessui/react": "^1.7.16",
     "@heroicons/react": "^2.0.18",
     "@t3-oss/env-nextjs": "^0.3.1",
     "@types/jsonwebtoken": "^9.0.2",
@@ -78,4 +79,4 @@
     "tls": false,
     "child_process": false
   }
-}
+}

src/components/HomePage.tsx

@@ -1,26 +1,34 @@
 'use client';
 
-import { Flex } from '@bigcommerce/big-design';
-import { NextLink } from '~/components/NextLink';
+import '~/styles/home.css';
+
+import Footer from '~/components/HomePage/Footer';
+import Header from '~/components/HomePage/Header';
 
 export const HomePage = () => {
   return (
-    <Flex
-      justifyContent="center"
-      alignItems="center"
-      flexDirection="column"
-      style={{ minHeight: '90vh' }}
-    >
-      <h2 className="text-2xl">Home Page TBD</h2>
-
-      <span className="my-4 max-w-[350px] rounded-md border bg-orange-100 p-2 text-center">
-        Accessing the products page for the first time without visiting the
-        product review through the app extension will result in access token
-        error.
-      </span>
-      <div className="mt-4">
-        <NextLink href="/products">All Products</NextLink>
-      </div>
-    </Flex>
+    <div>
+      <Header />
+      <main className="grow">
+        <section className="relative">
+          <div className="mx-auto max-w-6xl px-4 sm:px-6">
+            {/* Hero content */}
+            <div className="pb-12 pt-32 md:pb-20 md:pt-40">
+              {/* Section header */}
+              <div className="pb-12 text-center md:pb-16">
+                <h1 className="leading-tighter mb-4 text-5xl font-extrabold tracking-tighter md:text-6xl">
+                  Welcome to
+                  <br />
+                  <span className="bg-gradient-to-r from-blue-500 to-teal-400 bg-clip-text text-transparent">
+                    REVIEW PULSE
+                  </span>
+                </h1>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+      <Footer />
+    </div>
   );
 };

src/components/HomePage/Dropdown.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import { useState } from "react";
+import { Transition } from "@headlessui/react";
+
+type DropdownProps = {
+  children: React.ReactNode;
+  title: string;
+};
+
+export default function Dropdown({ children, title }: DropdownProps) {
+  const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);
+
+  return (
+    <li
+      className="relative"
+      onMouseEnter={() => setDropdownOpen(true)}
+      onMouseLeave={() => setDropdownOpen(false)}
+      onFocus={() => setDropdownOpen(true)}
+      onBlur={() => setDropdownOpen(false)}
+    >
+      <a
+        className="text-gray-600 hover:text-gray-900 px-3 lg:px-5 py-2 flex items-center transition duration-150 ease-in-out"
+        href="#0"
+        aria-expanded={dropdownOpen}
+        onClick={(e) => e.preventDefault()}
+      >
+        {title}
+        <svg
+          className="w-3 h-3 fill-current text-gray-500 cursor-pointer ml-1 shrink-0"
+          viewBox="0 0 12 12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path d="M10.28 4.305L5.989 8.598 1.695 4.305A1 1 0 00.28 5.72l5 5a1 1 0 001.414 0l5-5a1 1 0 10-1.414-1.414z" />
+        </svg>
+      </a>
+      <Transition
+        show={dropdownOpen}
+        as="ul"
+        className="origin-top-right absolute top-full right-0 w-40 bg-white py-2 ml-4 rounded shadow-lg"
+        enter="transition ease-out duration-200 transform"
+        enterFrom="opacity-0 -translate-y-2"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-out duration-200"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        {children}
+      </Transition>
+    </li>
+  );
+}

src/components/HomePage/Footer.tsx

@@ -0,0 +1,50 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import Logo from '~/components/HomePage/Logo';
+
+export default function Footer() {
+  return (
+    <footer>
+      <div className="mx-auto max-w-6xl px-4 sm:px-6">
+        {/* Top area: Blocks */}
+        <div className="grid gap-8 border-t border-gray-200 py-8 sm:grid-cols-12 md:py-12">
+          {/* 1st block */}
+          <div className="sm:col-span-12 lg:col-span-3">
+            <div className="mb-2">
+              <Logo />
+            </div>
+            <div className="text-sm text-gray-600">
+              <span className="mr-2 font-bold">Review Pulse</span>
+              <div className="mb-2">
+                <Link
+                  href="https://www.ildecimo.com/"
+                  className="text-gray-600 transition duration-150 ease-in-out hover:text-gray-900 hover:underline"
+                  target="_blank"
+                >
+                  ildecimo.com
+                </Link>
+              </div>
+              <div>
+                <Image
+                  src="/images/partner-logo.png"
+                  alt="BigCommerce Partner"
+                  width={110}
+                  height={100}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Bottom area */}
+        <div className="border-t border-gray-200 py-4 text-center md:flex md:items-center md:justify-between md:py-8">
+          {/* Copyrights note */}
+          <div className="mr-4 text-sm text-gray-600">
+            &copy; ildecimo.com All rights reserved
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/HomePage/Header.tsx

@@ -0,0 +1,66 @@
+'use client';
+import Link from 'next/link';
+
+import { useEffect, useState } from 'react';
+import Logo from '~/components/HomePage/Logo';
+import MobileMenu from '~/components/HomePage/MobileMenu';
+
+export default function Header() {
+  const [top, setTop] = useState<boolean>(true);
+
+  // detect whether user has scrolled the page down by 10px
+  const scrollHandler = () => {
+    window.pageYOffset > 10 ? setTop(false) : setTop(true);
+  };
+
+  useEffect(() => {
+    scrollHandler();
+    window.addEventListener('scroll', scrollHandler);
+    return () => window.removeEventListener('scroll', scrollHandler);
+  }, [top]);
+
+  return (
+    <header
+      className={`fixed z-30 w-full transition duration-300 ease-in-out md:bg-opacity-90 ${
+        !top ? 'bg-white shadow-lg backdrop-blur-sm' : ''
+      }`}
+    >
+      <div className="mx-auto max-w-6xl px-5 sm:px-6">
+        <div className="flex h-16 items-center justify-between md:h-20">
+          {/* Site branding */}
+          <div className="mr-4 shrink-0">
+            <Logo />
+          </div>
+
+          {/* Desktop navigation */}
+          <nav className="hidden md:flex md:grow">
+            {/* Desktop sign in links */}
+            <ul className="flex grow flex-wrap items-center justify-end">
+              <li>
+                <Link
+                  href="https://github.com/ildecimo/ReviewPulse"
+                  className="btn-sm ml-3 bg-blue-800 text-white hover:bg-blue-700"
+                  target="_blank"
+                >
+                  <span>Info Page</span>
+                  <svg
+                    className="-mr-1 ml-2 h-3 w-3 shrink-0 fill-current text-white"
+                    viewBox="0 0 12 12"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
+                      fillRule="nonzero"
+                    />
+                  </svg>
+                </Link>
+              </li>
+            </ul>
+          </nav>
+
+          <MobileMenu />
+        </div>
+      </div>
+    </header>
+  );
+}

src/components/HomePage/Logo.tsx

@@ -0,0 +1,16 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+export default function Logo() {
+  return (
+    <Link href="/" className="block" aria-label="Review Pulse">
+      <Image
+        src="/images/logo.webp"
+        alt="Review Pulse"
+        width={40}
+        height={40}
+        priority
+      />
+    </Link>
+  );
+}

src/components/HomePage/MobileMenu.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { Transition } from '@headlessui/react';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
+
+export default function MobileMenu() {
+  const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
+
+  const trigger = useRef<HTMLButtonElement>(null);
+  const mobileNav = useRef<HTMLDivElement>(null);
+
+  // close the mobile menu on click outside
+  useEffect(() => {
+    const clickHandler = ({ target }: { target: EventTarget | null }): void => {
+      if (!mobileNav.current || !trigger.current) return;
+      if (
+        !mobileNavOpen ||
+        mobileNav.current.contains(target as Node) ||
+        trigger.current.contains(target as Node)
+      )
+        return;
+      setMobileNavOpen(false);
+    };
+    document.addEventListener('click', clickHandler);
+    return () => document.removeEventListener('click', clickHandler);
+  });
+
+  // close the mobile menu if the esc key is pressed
+  useEffect(() => {
+    const keyHandler = ({ keyCode }: { keyCode: number }): void => {
+      if (!mobileNavOpen || keyCode !== 27) return;
+      setMobileNavOpen(false);
+    };
+    document.addEventListener('keydown', keyHandler);
+    return () => document.removeEventListener('keydown', keyHandler);
+  });
+
+  return (
+    <div className="flex md:hidden">
+      {/* Hamburger button */}
+      <button
+        ref={trigger}
+        className={`hamburger ${mobileNavOpen ? 'active' : ''}`}
+        aria-controls="mobile-nav"
+        aria-expanded={mobileNavOpen}
+        onClick={() => setMobileNavOpen(!mobileNavOpen)}
+      >
+        <span className="sr-only">Menu</span>
+        <svg
+          className="h-6 w-6 fill-current text-gray-900"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <rect y="4" width="24" height="2" />
+          <rect y="11" width="24" height="2" />
+          <rect y="18" width="24" height="2" />
+        </svg>
+      </button>
+
+      {/*Mobile navigation */}
+      <div ref={mobileNav}>
+        <Transition
+          show={mobileNavOpen}
+          as="nav"
+          id="mobile-nav"
+          className="absolute left-0 top-full z-20 h-screen w-full overflow-scroll bg-white pb-16"
+          enter="transition ease-out duration-200 transform"
+          enterFrom="opacity-0 -translate-y-2"
+          enterTo="opacity-100 translate-y-0"
+          leave="transition ease-out duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <ul className="px-5 py-2">
+            <li>
+              <Link
+                href="https://github.com/ildecimo/ReviewPulse"
+                className="btn-sm my-2 w-full bg-blue-800 text-white hover:bg-blue-700"
+                onClick={() => setMobileNavOpen(false)}
+                target="_blank"
+              >
+                <span>Info Page</span>
+                <svg
+                  className="-mr-1 ml-2 h-3 w-3 shrink-0 fill-current text-white"
+                  viewBox="0 0 12 12"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M11.707 5.293L7 .586 5.586 2l3 3H0v2h8.586l-3 3L7 11.414l4.707-4.707a1 1 0 000-1.414z"
+                    fillRule="nonzero"
+                  />
+                </svg>
+              </Link>
+            </li>
+          </ul>
+        </Transition>
+      </div>
+    </div>
+  );
+}