Skip to content

Hero redesign #552

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Blaumaus merged 9 commits into from
May 26, 2026
Merged

Hero redesign #552

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e6a7c2e
Update landing page hero design
Blaumaus May 25, 2026
10ed8c4
Use AVIF / WEBP
Blaumaus May 25, 2026
9dff9b4
fix image path
Blaumaus May 25, 2026
61af5df
Better texts
Blaumaus May 25, 2026
cae4526
Improvements
Blaumaus May 26, 2026
8d4cc10
Support prefixed paths
Blaumaus May 26, 2026
70ffd3a
A/B test old vs new hero variants
Blaumaus May 26, 2026
41fb307
Update CTA UI
Blaumaus May 26, 2026
a58afe4
Update supplementary CTAs UI
Blaumaus May 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 89 additions & 25 deletions web/app/components/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const getCallsToAction = (t: typeof i18nextT) => [
},
]

const SolutionsMenu = () => {
const SolutionsMenu = ({ inverted }: { inverted?: boolean }) => {
const { t } = useTranslation('common')
const solutions = getSolutions(t)
const ctas = getCallsToAction(t)
Expand Down Expand Up @@ -148,7 +148,10 @@ const SolutionsMenu = () => {
>
<button
type='button'
className='underline-animate inline-flex items-center gap-x-1 text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
className={cn(
'underline-animate inline-flex items-center gap-x-1 text-base leading-6 font-semibold focus:outline-hidden',
inverted ? 'text-white' : 'text-slate-800 dark:text-white',
)}
>
<span>{t('header.solutions.title')}</span>
<CaretDownIcon
Expand Down Expand Up @@ -270,9 +273,11 @@ const SolutionsMenu = () => {
const ProfileMenu = ({
logoutHandler,
openFeedback,
inverted,
}: {
logoutHandler: () => void
openFeedback: () => void
inverted?: boolean
}) => {
const { user } = useAuth()
const {
Expand All @@ -285,7 +290,12 @@ const ProfileMenu = ({
{({ open }) => (
<>
<div>
<MenuButton className='underline-animate flex items-center justify-center text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'>
<MenuButton
className={cn(
'underline-animate flex items-center justify-center text-base leading-6 font-semibold focus:outline-hidden',
inverted ? 'text-white' : 'text-slate-800 dark:text-white',
)}
>
<span>{t('common.account')}</span>
<CaretDownIcon
className={cx(
Expand Down Expand Up @@ -469,18 +479,29 @@ const ProfileMenu = ({
)
}

const Separator = () => (
<svg viewBox='0 0 2 2' className='h-0.5 w-0.5 flex-none fill-gray-400'>
const Separator = ({ inverted }: { inverted?: boolean }) => (
<svg
viewBox='0 0 2 2'
className={cn(
'h-0.5 w-0.5 flex-none',
inverted ? 'fill-white/70' : 'fill-gray-400',
)}
>
<circle cx={1} cy={1} r={1} />
</svg>
)

const CommunityLinks = () => {
const CommunityLinks = ({ inverted }: { inverted?: boolean }) => {
return (
<span className='flex items-center gap-2'>
<a
href={DISCORD_URL}
className='inline-flex items-center rounded-md p-1 text-indigo-600 transition-colors hover:text-indigo-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-900/60 dark:text-indigo-400 dark:hover:text-indigo-100 dark:focus-visible:ring-slate-300/60'
className={cn(
'inline-flex items-center rounded-md p-1 transition-colors focus:outline-hidden focus-visible:ring-2',
inverted
? 'text-white/85 hover:text-white focus-visible:ring-white/70'
: 'text-indigo-600 hover:text-indigo-500 focus-visible:ring-slate-900/60 dark:text-indigo-400 dark:hover:text-indigo-100 dark:focus-visible:ring-slate-300/60',
)}
target='_blank'
rel='noreferrer noopener'
>
Expand All @@ -493,7 +514,12 @@ const CommunityLinks = () => {
</a>
<a
href={GITHUB_URL}
className='inline-flex items-center rounded-md p-1 text-slate-700 transition-colors hover:text-slate-500 focus:outline-hidden focus-visible:ring-2 focus-visible:ring-slate-900/60 dark:text-gray-200 dark:hover:text-white dark:focus-visible:ring-slate-300/60'
className={cn(
'inline-flex items-center rounded-md p-1 transition-colors focus:outline-hidden focus-visible:ring-2',
inverted
? 'text-white/85 hover:text-white focus-visible:ring-white/70'
: 'text-slate-700 hover:text-slate-500 focus-visible:ring-slate-900/60 dark:text-gray-200 dark:hover:text-white dark:focus-visible:ring-slate-300/60',
)}
target='_blank'
rel='noreferrer noopener'
>
Expand All @@ -513,11 +539,13 @@ const AuthedHeader = ({
colourBackground,
openMenu,
openFeedback,
inverted,
}: {
logoutHandler: () => void
colourBackground: boolean
openMenu: () => void
openFeedback: () => void
inverted?: boolean
}) => {
const { t } = useTranslation('common')

Expand All @@ -533,41 +561,53 @@ const AuthedHeader = ({
<div className='flex items-center'>
{/* Logo */}
<Link to={routes.main}>
<SwetrixLogo />
<SwetrixLogo theme={inverted ? 'dark' : undefined} />
</Link>

<div className='ml-10 hidden gap-4 space-x-1 lg:flex'>
{!isSelfhosted && !isDisableMarketingPages ? (
<SolutionsMenu />
<SolutionsMenu inverted={inverted} />
) : null}
<a
href={DOCS_URL}
className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
className={cn(
'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
inverted ? 'text-white' : 'text-slate-800 dark:text-white',
)}
target='_blank'
rel='noreferrer noopener'
>
{t('common.docs')}
</a>
<Link
to={routes.dashboard}
className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
className={cn(
'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
inverted ? 'text-white' : 'text-slate-800 dark:text-white',
)}
>
{t('common.dashboard')}
</Link>
</div>
</div>
<div className='ml-1 hidden flex-wrap items-center justify-center space-y-1 space-x-2 sm:space-y-0 lg:ml-10 lg:flex lg:space-x-2'>
<CommunityLinks />
<CommunityLinks inverted={inverted} />
<ProfileMenu
logoutHandler={logoutHandler}
openFeedback={openFeedback}
inverted={inverted}
/>
</div>
<div className='flex items-center justify-center space-x-3 lg:hidden'>
<button
type='button'
onClick={openMenu}
className='rounded-md p-1 text-slate-700 transition-colors hover:bg-gray-400/20 hover:text-slate-600 dark:text-gray-200 dark:hover:bg-slate-700/50 dark:hover:text-gray-300'
className={cn(
'rounded-md p-1 transition-colors hover:bg-gray-400/20 dark:hover:bg-slate-700/50',
inverted
? 'text-white hover:text-white'
: 'text-slate-700 hover:text-slate-600 dark:text-gray-200 dark:hover:text-gray-300',
)}
aria-label={t('common.openMenu')}
>
<ListIcon className='h-8 w-8 flex-none' aria-hidden='true' />
Expand All @@ -583,10 +623,12 @@ const NotAuthedHeader = ({
colourBackground,
refPage,
openMenu,
inverted,
}: {
colourBackground: boolean
refPage?: boolean
openMenu: () => void
inverted?: boolean
}) => {
const { t } = useTranslation('common')

Expand All @@ -602,36 +644,44 @@ const NotAuthedHeader = ({
<div className='flex items-center'>
{/* Logo */}
{refPage ? (
<SwetrixLogo />
<SwetrixLogo theme={inverted ? 'dark' : undefined} />
) : (
<Link to={routes.main}>
<SwetrixLogo />
<SwetrixLogo theme={inverted ? 'dark' : undefined} />
</Link>
)}

{!refPage ? (
<div className='ml-10 hidden items-center gap-4 space-x-1 lg:flex'>
{!isSelfhosted && !isDisableMarketingPages ? (
<SolutionsMenu />
<SolutionsMenu inverted={inverted} />
) : null}
{!isSelfhosted && !isDisableMarketingPages ? (
<Link
to={`${routes.main}#pricing`}
className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
className={cn(
'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
inverted
? 'text-white'
: 'text-slate-800 dark:text-white',
)}
key='Pricing'
>
{t('common.pricing')}
</Link>
) : null}
<a
href={DOCS_URL}
className='underline-animate text-base leading-6 font-semibold text-slate-800 focus:outline-hidden dark:text-white'
className={cn(
'underline-animate text-base leading-6 font-semibold focus:outline-hidden',
inverted ? 'text-white' : 'text-slate-800 dark:text-white',
)}
target='_blank'
rel='noreferrer noopener'
>
{t('common.docs')}
</a>
<CommunityLinks />
<CommunityLinks inverted={inverted} />
</div>
) : null}
</div>
Expand All @@ -640,14 +690,20 @@ const NotAuthedHeader = ({
<>
<Link
to={routes.signin}
className='underline-animate flex items-center text-base leading-6 font-semibold text-slate-800 dark:text-white'
className={cn(
'underline-animate flex items-center text-base leading-6 font-semibold',
inverted ? 'text-white' : 'text-slate-800 dark:text-white',
)}
>
{t('auth.common.signin')}
</Link>
<Separator />
<Separator inverted={inverted} />
<Link
to={routes.signup}
className='underline-animate flex items-center text-base leading-6 font-semibold text-slate-800 dark:text-white'
className={cn(
'underline-animate flex items-center text-base leading-6 font-semibold',
inverted ? 'text-white' : 'text-slate-800 dark:text-white',
)}
>
{isSelfhosted ? t('header.signUp') : t('header.startForFree')}
<ArrowRightIcon className='mt-[1px] ml-1 size-4' />
Expand All @@ -659,7 +715,12 @@ const NotAuthedHeader = ({
<button
type='button'
onClick={openMenu}
className='rounded-md p-1 text-slate-700 transition-colors hover:bg-gray-400/20 hover:text-slate-600 dark:text-gray-200 dark:hover:bg-slate-700/50 dark:hover:text-gray-300'
className={cn(
'rounded-md p-1 transition-colors hover:bg-gray-400/20 dark:hover:bg-slate-700/50',
inverted
? 'text-white hover:text-white'
: 'text-slate-700 hover:text-slate-600 dark:text-gray-200 dark:hover:text-gray-300',
)}
aria-label={t('common.openMenu')}
>
<ListIcon className='h-8 w-8 flex-none' aria-hidden='true' />
Expand All @@ -674,9 +735,10 @@ const NotAuthedHeader = ({
interface HeaderProps {
refPage?: boolean
transparent?: boolean
inverted?: boolean
}

const Header = ({ refPage, transparent }: HeaderProps) => {
const Header = ({ refPage, transparent, inverted }: HeaderProps) => {
const { t } = useTranslation('common')
const { isAuthenticated, logout } = useAuth()
const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
Expand Down Expand Up @@ -710,12 +772,14 @@ const Header = ({ refPage, transparent }: HeaderProps) => {
colourBackground={!transparent}
openMenu={openMenu}
openFeedback={openFeedback}
inverted={inverted}
/>
) : (
<NotAuthedHeader
colourBackground={!transparent}
refPage={refPage}
openMenu={openMenu}
inverted={inverted}
/>
)}

Expand Down
Loading
Loading