Skip to content

Commit

Permalink
feat: design the menu
Browse files Browse the repository at this point in the history
  • Loading branch information
@n1c01a5
n1c01a5 committed Feb 24, 2023
1 parent cac2850 commit 8ba228f
Show file tree
Hide file tree
Showing 7 changed files with 79 additions and 146 deletions.
140 changes: 30 additions & 110 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,6 @@ const solutions = [
icon: ChatIcon,
},
*/

]
const resources = [
{
Expand Down Expand Up @@ -83,11 +82,7 @@ const Header: React.FC = () => {
}, [])

return (
<Popover
className={`fixed top-0 left-0 right-0 z-40 transition ${
isOpaque ? 'bg-gray-900/[.99] drop-shadow-lg' : 'bg-transparent'
}`}
>
<Popover>
<div className="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start md:space-x-10">
<div>
<Link passHref={true} href="/" className="flex">
Expand All @@ -101,113 +96,31 @@ const Header: React.FC = () => {
</Link>
</div>
<div className="-my-2 -mr-2 md:hidden">
<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-indigo-500">
<Popover.Button className="inline-flex items-center justify-center bg-black p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
<span className="sr-only">Open menu</span>
<MenuIcon className="h-6 w-6" aria-hidden="true" />
</Popover.Button>
</div>
<div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
{/* TODO this part is commented in waiting the pages implementation */}
<Popover.Group as="nav" className="flex space-x-10">
<Link href="/features" className="text-base font-medium text-neutral-200 hover:text-white">
<Link
href="/features"
className="text-base font-medium text-neutral-200 hover:text-white"
>
{translate('navitem_features')}
</Link>
<Link href="https://docs.feature.sh" className="ml-8 text-base font-medium text-neutral-200 hover:text-white">
<Link
href="https://docs.feature.sh"
className="ml-8 text-base font-medium text-neutral-200 hover:text-white"
>
{translate('navitem_docs')}
</Link>
{/* <Popover className="relative">
{({ open }) => (
<>
<Popover.Button
className={classNames(
open ? 'text-white' : 'text-neutral-200',
'group inline-flex items-center rounded-md bg-transparent text-base font-medium hover:text-white focus:outline-none '
)}
>
{translate('navitem_features')}
<ChevronDownIcon
className={classNames(
open ? 'text-neutral-200' : 'text-neutral-100',
'ml-2 h-5 w-5 group-hover:text-white'
)}
aria-hidden="true"
/>
</Popover.Button>
<Transition
as={Fragment}
enter="transition ease-out duration-200"
enterFrom="opacity-0 translate-y-1"
enterTo="opacity-100 translate-y-0"
leave="transition ease-in duration-150"
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-1"
>
<Popover.Panel className="absolute z-10 mt-3 -ml-4 w-screen max-w-md transform lg:max-w-3xl">
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
{solutions.map((item) => (
<a
key={item.name}
href={item.href}
className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
>
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
<item.icon
className="h-6 w-6"
aria-hidden="true"
/>
</div>
<div className="ml-4">
<p className="text-base font-medium text-gray-900">
{item.name}
</p>
<p className="mt-1 text-sm text-gray-500">
{item.description}
</p>
</div>
</a>
))}
</div>
<div className="bg-gray-50 p-5 sm:p-8">
<a
href="#"
className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100"
>
<div className="flex items-center">
<div className="text-base font-medium text-gray-900">
Enterprise
</div>
<span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
New
</span>
</div>
<p className="mt-1 text-sm text-gray-500">
Empower your entire team with even more advanced
tools.
</p>
</a>
</div>
</div>
</Popover.Panel>
</Transition>
</>
)}
</Popover>
*/}

{/*
<Link href="/blog">
<a className="text-base font-medium text-neutral-200 hover:text-white">
{translate('navitem_blog')}
</a>
</Link>
*/}
</Popover.Group>
{/* FIXME remove this div if there is any item menu */}
<div />
<div className="flex items-center md:ml-12">
<Link href="https://v1.dashboard.feature.sh" className="ml-8 text-base font-medium text-neutral-200 hover:text-white">
<Link
href="https://v1.dashboard.feature.sh"
className="ml-8 text-base font-medium text-neutral-200 hover:text-white"
>
{translate('navitem_dashboard')}
</Link>
<Link
Expand All @@ -231,9 +144,9 @@ const Header: React.FC = () => {
>
<Popover.Panel
focus
className="absolute inset-x-0 top-0 origin-top-right transform p-2 transition md:hidden"
className="absolute inset-x-0 top-0 z-40 origin-top-right transform p-2 transition md:hidden"
>
<div className="divide-y-2 divide-gray-50 rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
<div className="divide-y-2 divide-gray-50 bg-black shadow-lg ring-1 ring-black ring-opacity-5">
<div className="px-5 pt-5 pb-6">
<div className="flex items-center justify-between">
<div>
Expand All @@ -257,12 +170,13 @@ const Header: React.FC = () => {
<Link
key={item.name}
href={item.href}
className="-m-3 flex items-center rounded-lg p-3 hover:bg-gray-50"
className="-m-3 flex items-center p-3 text-white hover:bg-gray-50 hover:text-black"
passHref={true}
>
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white">
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center bg-indigo-500 text-white">
<item.icon className="h-6 w-6" aria-hidden="true" />
</div>
<div className="ml-4 text-base font-medium text-gray-900">
<div className="ml-4 text-base font-medium">
{item.name}
</div>
</Link>
Expand All @@ -272,10 +186,16 @@ const Header: React.FC = () => {
</div>
<div className="px-5 py-6">
<div>
<a href={process.env.NEXT_PUBLIC_CALENDAR_URL_BOOK_A_DEMO || '#'} className="flex w-full items-center justify-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">
{translate('navitem_book')}
</a>
<Link href="https://v1.dashboard.feature.sh" className="mt-5 block text-center text-indigo-600 hover:text-indigo-500">
<a
href={process.env.NEXT_PUBLIC_CALENDAR_URL_BOOK_A_DEMO || '#'}
className="flex w-full items-center justify-center border border-transparent bg-white px-4 py-2 text-base font-medium text-black shadow-sm hover:bg-yellow-500"
>
{translate('navitem_book')}
</a>
<Link
href="https://v1.dashboard.feature.sh"
className="mt-5 block text-center text-indigo-600 hover:text-indigo-500"
>
Sign in
</Link>
</div>
Expand Down
8 changes: 6 additions & 2 deletions layouts/withMainLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@ import Footer from '../components/Footer'
const withMainLayout = (page: ReactElement) => (
<>
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5QL9D3K"
height="0" width="0" style={{display: 'none',visibility: 'hidden'}} />
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-5QL9D3K"
height="0"
width="0"
style={{ display: 'none', visibility: 'hidden' }}
/>
</noscript>
<Header />
{page}
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@
"@types/node": "^17.0.4",
"@types/react": "17.0.38",
"autoprefixer": "^10.4.0",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10",
"postcss": "^8.4.5",
"prettier": "^2.5.1",
"prettier-plugin-tailwindcss": "^0.1.1",
"tailwindcss": "^3.0.7",
"typescript": "4.5.4",
"eslint": "8.8.0",
"eslint-config-next": "12.0.10"
"typescript": "4.5.4"
}
}
19 changes: 2 additions & 17 deletions pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,25 +34,10 @@ const MyApp = ({ Component, pageProps }: AppPropsWithLayout) => {
gtag('config', '${process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID}');
`}
</Script>
<Script
{/* <Script
src={`https://www.googleoptimize.com/optimize.js?id=${process.env.NEXT_PUBLIC_OPTIMIZE_CONTAINER_ID}`}
id="google-optimize"
/>
<Script id="matomo">
{`
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://feature.matomo.cloud/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '1']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src='//cdn.matomo.cloud/feature.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
})();
`}
</Script>
/> */}
<Script id="gtm">
{`
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
Expand Down
48 changes: 35 additions & 13 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,9 +31,14 @@ const HeroSection: React.FC = () => {
const { t: translate } = useTranslation('homepage')

return (
<section className="relative min-h-[70vh] overflow-hidden bg-gray-900 pb-4">
<section className="relative min-h-[70vh] overflow-hidden pb-4">
<div className="absolute -right-14 -top-14 flex justify-center">
<Image src="/logos/github.svg" height={850} width={850} alt="Github logo" />
<Image
src="/logos/github.svg"
height={850}
width={850}
alt="Github logo"
/>
</div>

<div className="relative z-10 flex min-h-[70vh] items-center pt-32 lg:px-4 lg:pt-8">
Expand All @@ -52,19 +57,32 @@ const HeroSection: React.FC = () => {
{translate('hero_subheading')}
</p>
<div className="mx-auto mt-10 sm:mt-12">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
<a href={process.env.NEXT_PUBLIC_DAPP_BASE_URL || '#'} className="inline-flex flex-1 items-center justify-center rounded-md border border-transparent border-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-2">
<a
href={process.env.NEXT_PUBLIC_DAPP_BASE_URL || '#'}
className="inline-flex flex-1 items-center justify-center rounded-md border border-transparent border-indigo-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-indigo-700"
>
{translate('hero_try_free')}
</a>
<a href={process.env.NEXT_PUBLIC_CALENDAR_URL_BOOK_A_DEMO || '#'} className="inline-flex flex-1 items-center justify-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">
<a
href={
process.env.NEXT_PUBLIC_CALENDAR_URL_BOOK_A_DEMO || '#'
}
className="inline-flex flex-1 items-center justify-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"
>
{translate('hero_button_book_demo')}
</a>
</div>
</div>
</div>
</div>
<div className="flex items-center justify-center py-8 lg:col-span-2 lg:py-0">
<Image src="/hero_snippet.png" width={579} height={377} alt="Snippet code"/>
<Image
src="/hero_snippet.png"
width={579}
height={377}
alt="Snippet code"
/>
</div>
</div>
</div>
Expand Down Expand Up @@ -168,7 +186,11 @@ const FeaturesSection = () => {
))}
</dl>
<div className="flex justify-center lg:justify-end">
<Link passHref href="/features" className="mt-12 flex items-center gap-x-2 text-right">
<Link
passHref
href="/features"
className="mt-12 flex items-center gap-x-2 text-right"
>
{translate('features_more')}
<ArrowRightIcon className="h-5 w-5" />
</Link>
Expand Down Expand Up @@ -228,7 +250,7 @@ const TestimonialSection: React.FC<TestimonialSectionProps> = ({
/>
<div className="mx-auto max-w-md items-center px-4 sm:max-w-3xl sm:px-6 lg:flex lg:h-full lg:px-10">
<Fade key={currentTestimonialId}>
<div className="aspect-w-10 aspect-h-6 mx-auto flex w-2/3 items-center overflow-hidden rounded-xl shadow-xl sm:aspect-w-16 sm:aspect-h-7 sm:w-1/2 lg:aspect-none lg:h-full lg:w-full lg:w-full">
<div className="aspect-w-10 aspect-h-6 mx-auto flex w-2/3 items-center overflow-hidden rounded-xl shadow-xl sm:aspect-w-16 sm:aspect-h-7 sm:w-1/2 lg:aspect-none lg:h-full lg:w-full">
<img
className="object-cover object-center lg:h-full lg:w-full"
src={testimonial.photo}
Expand Down Expand Up @@ -448,23 +470,23 @@ const BlockchainAvailable: React.FC = () => {
Deployed on
</p>
<div className="mt-6 grid grid-cols-1 gap-0.5 md:grid-cols-3 lg:mt-8">
<div className="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
<div className="col-span-1 flex justify-center bg-gray-50 px-8 py-8">
<img
className="contrast-240 max-h-12 grayscale"
src="/xdai-logo.png"
alt="Xdai logo"
/>
</div>
<div className="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
<div className="col-span-1 flex justify-center bg-gray-50 px-8 py-8">
<img
className="max-h-12 contrast-50 grayscale"
src="/polygon-logo.webp"
alt="Polygon logo"
/>
</div>
<div className="col-span-1 flex justify-center bg-gray-50 py-8 px-8">
<div className="col-span-1 flex justify-center bg-gray-50 px-8 py-8">
<img
className="contrast-70 max-h-12 grayscale"
className="contrast-70 max-h-12 grayscale"
src="/arbitrum-logo.png"
alt="Arbitrum logo"
/>
Expand All @@ -481,7 +503,7 @@ const CTA: React.FC = () => {
return (
<div className="flex bg-gray-900 py-16">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl px-4 sm:px-6 font-extrabold text-white sm:text-4xl">
<h2 className="px-4 text-3xl font-extrabold text-white sm:px-6 sm:text-4xl">
<span className="block">Be like them</span>
<span className="block">And start your Feature</span>
</h2>
Expand Down
2 changes: 2 additions & 0 deletions styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,6 @@

html, body, #__next {
height: 100%;
background: linear-gradient(90deg, #000 calc(100% - 1px), #fdcece 0);
background-size: calc((100% - 11px)/12 + 11px) 100%;
}

0 comments on commit 8ba228f

Please sign in to comment.