Add CTA and sign in to nav

This commit is contained in:
Joshen Lim committed 2020-12-01 12:37:47 +08:00
1 parent 33293e400d
commit fd60130b41
2 files changed
+55 -30

No files matched your search

+52 -29
View File
@@ -132,30 +132,63 @@ const Nav = (props: Props) => {
<HamburgerButton toggleFlyOut={() => setOpen(true)} />
<div className="flex-1 flex items-center justify-center sm:px-10 sm:items-stretch sm:justify-start">
<div className="flex-shrink-0 flex items-center">
<img
className="block lg:hidden h-6 w-auto"
src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
alt="Logo"
/>
<img
className="hidden lg:block h-6 w-auto"
src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
alt="Logo"
/>
<div className="flex-1 flex items-center justify-center sm:px-10 sm:items-stretch sm:justify-between">
<div className="flex items-center">
<div className="flex-shrink-0 flex items-center">
<img
className="block lg:hidden h-6 w-auto"
src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
alt="Logo"
/>
<img
className="hidden lg:block h-6 w-auto"
src={darkMode ? "images/logo-dark.png" : "images/logo-light.png"}
alt="Logo"
/>
</div>
<div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
<FlyOut />
<a
href="#"
className={`
inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
text-gray-500 hover:text-gray-700 hover:border-gray-500
dark:text-dark-100 dark:hover:border-dark-100
`}
>
Developers
</a>
<a
href="#"
className={`
inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
text-gray-500 hover:text-gray-700 hover:border-gray-500
dark:text-dark-100 dark:hover:border-dark-100
`}
>
Company
</a>
<a
href="#"
className={`
inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
text-gray-500 hover:text-gray-700 hover:border-gray-500
dark:text-dark-100 dark:hover:border-dark-100
`}
>
Pricing
</a>
</div>
</div>
<div className="pl-4 hidden sm:ml-6 sm:flex sm:space-x-8">
<FlyOut />
<div className="flex items-center">
<a
href="#"
className={`
inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
text-gray-500 hover:text-gray-700 hover:border-gray-500
dark:text-dark-100 dark:hover:border-dark-100
inline-flex items-center border-b-2 border-transparent text-sm font-normal transition
rounded-md px-3 py-1 mr-5 bg-brand-600 text-gray-500 dark:text-white hover:bg-brand-700
`}
>
Developers
Start a project
</a>
<a
href="#"
@@ -165,17 +198,7 @@ const Nav = (props: Props) => {
dark:text-dark-100 dark:hover:border-dark-100
`}
>
Company
</a>
<a
href="#"
className={`
inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium
text-gray-500 hover:text-gray-700 hover:border-gray-500
dark:text-dark-100 dark:hover:border-dark-100
`}
>
Pricing
Sign in
</a>
</div>
</div>
+3 -1
View File
@@ -3,6 +3,7 @@ type Props = {
text: string,
url?: string,
className?: string,
hideArrow?: boolean,
}
const Button = (props: Props) => {
@@ -10,7 +11,8 @@ const Button = (props: Props) => {
type = 'primary',
text,
url,
className
className,
hideArrow = false,
} = props
const colorClass = type === 'primary'