-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
15 changed files
with
680 additions
and
20 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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"> | ||
© ildecimo.com All rights reserved | ||
</div> | ||
</div> | ||
</div> | ||
</footer> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
); | ||
} |
Oops, something went wrong.