Skip to content

Commit

Permalink
Merge pull request #10 from rarimo/feature/landing-redesign
Browse files Browse the repository at this point in the history 
Landing redesign
  • Loading branch information
@ardier16
ardier16 authored Apr 11, 2024
2 parents 9f1504d + e330e12 commit d748867
Show file tree
Hide file tree
Showing 95 changed files with 1,273 additions and 1,328 deletions.
149 changes: 68 additions & 81 deletions src/components/AppBar/AppBar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,89 +91,76 @@ const AppBar = () => {
</svg>
</Link>

{isDesktop ? (
<>
<nav className="app-bar__navigation">
<ul className="app-bar__nav-list">
{navigation.map(
(link, index) =>
(!link.includeRoutes ||
link.includeRoutes?.includes(
displayLocation.pathname,
)) && (
<li
className="app-bar__nav-item"
key={index}
role="link"
tabIndex="0"
onClick={() => handleNavClick(link)}
onKeyDown={event => {
switch (event.code) {
case 'Enter':
handleNavClick(link);
return;

default:
return;
}
}}
>
{t(link.textKey)}
</li>
),
)}
</ul>
</nav>

<div className="app-bar__links-wrapper">
<a
className="app-bar__link"
href={CONFIG.discordLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-bar.discord')}</span>
<svg className="app-bar__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
<a
className="app-bar__link"
href={CONFIG.twitterLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-bar.twitter')}</span>
<svg className="app-bar__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
<a
className="app-bar__link"
href={CONFIG.telegramLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-bar.telegram')}</span>
<svg className="app-bar__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
</div>
</>
) : (
<>
<BurgerButton
className="app-bar__sidebar-btn"
onClick={toggleSidebarVisibility}
/>
<AppSidebar
isVisible={isVisibleSidebar}
toggleVisibility={toggleSidebarVisibility}
/>
</>
{isDesktop && (
<nav className="app-bar__navigation">
<ul className="app-bar__nav-list">
{navigation.map(
(link, index) =>
(!link.includeRoutes ||
link.includeRoutes?.includes(
displayLocation.pathname,
)) && (
<li
className="app-bar__nav-item"
key={index}
role="link"
tabIndex="0"
onClick={() => handleNavClick(link)}
onKeyDown={event => {
switch (event.code) {
case 'Enter':
handleNavClick(link);
return;

default:
return;
}
}}
>
{t(link.textKey)}
</li>
),
)}
</ul>
</nav>
)}

<div className="app-bar__links-wrapper">
<a
className="app-bar__link"
href={CONFIG.discordLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<svg className="app-bar__link-icon">
<use href="/icons/sprite.svg#icon-discord"></use>
</svg>
</a>
<a
className="app-bar__link"
href={CONFIG.twitterLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<svg className="app-bar__link-icon">
<use href="/icons/sprite.svg#icon-x"></use>
</svg>
</a>

{!isDesktop && (
<>
<BurgerButton
className="app-bar__sidebar-btn"
onClick={toggleSidebarVisibility}
/>
<AppSidebar
isVisible={isVisibleSidebar}
toggleVisibility={toggleSidebarVisibility}
/>
</>
)}
</div>

<ThemeSwitcher />
</div>
</div>
Expand Down
21 changes: 9 additions & 12 deletions src/components/AppBar/AppBar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,6 @@

.app-bar__container {
height: 100%;

.app-bar--filled & {
@include noise-bg;
}
}

.app-bar__content {
Expand Down Expand Up @@ -93,23 +89,24 @@
.app-bar__link {
display: flex;
align-items: center;
color: var(--primary-text-color);
transition-property: color;
transition-duration: var(--medium-transition-duration);
transition-timing-function: var(--hover-transition-timing-function);
background-color: var(--col-white-bg-alpha);
padding: to-rem(12);
color: var(--col-white-alpha);
transition: all var(--hover-transition);

@include hover {
color: var(--primary-title-color);
background-color: var(--col-white-min-alpha);
color: var(--col-total-white);
}

&:not(:last-child) {
margin-right: to-rem(24);
margin-right: to-rem(16);
}
}

.app-bar__link-icon {
margin-left: to-rem(8);
transform: rotate(-45deg);
width: to-rem(16);
height: to-rem(16);
}

.app-bar__sidebar-btn {
Expand Down
1 change: 1 addition & 0 deletions src/components/AppButton/AppButton.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
.app-button {
font-family: var(--primary-font-family);
position: relative;
z-index: var(--z-default);
display: inline-flex;
Expand Down
171 changes: 92 additions & 79 deletions src/components/AppFooter/AppFooter.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import useNavigation from '@/hooks/useNavigation';
import useRouteLocation from '@/hooks/useRouteLocation';
import { navigation } from '@/template-data';

import SubscribeForm from '../SubscribeForm';

const AppFooter = () => {
const { t } = useTranslation();
const { displayLocation } = useRouteLocation();
Expand All @@ -30,89 +32,100 @@ const AppFooter = () => {
<footer className="app-footer container">
<div className="app-footer__content" data-aos="fade">
<div className="app-footer__logo-wrapper">
<Link className="app-footer__logo" to={ROUTES_PATHS.home}>
<svg className="app-footer__logo-img" height="24" width="93">
<use href="/icons/sprite.svg#icon-app-logo"></use>
</svg>
</Link>
<div>
<Link className="app-footer__logo" to={ROUTES_PATHS.home}>
<svg className="app-footer__logo-img" height="24" width="93">
<use href="/icons/sprite.svg#icon-app-logo"></use>
</svg>
</Link>
<p className="app-footer__logo-text">{t('app-footer.logo-text')}</p>
</div>
<span>&copy; {new Date().getFullYear()}</span>
</div>
<ul className="app-footer__links-list">
<>
<div className="app-footer__links">
<ul className="app-footer__links-list">
<>
<li className="app-footer__list-title">
{t('app-footer.nav-title')}
</li>
{navigation.map(
(link, index) =>
(!link.includeRoutes ||
link.includeRoutes?.includes(displayLocation.pathname)) && (
<li
className="app-footer__link"
key={index}
role="link"
tabIndex="0"
onClick={() => handleNavClick(link)}
onKeyDown={event => {
switch (event.code) {
case 'Enter':
handleNavClick(link);
return;

default:
return;
}
}}
>
{t(link.textKey)}
</li>
),
)}
</>
</ul>
<ul className="app-footer__links-list">
<li className="app-footer__list-title">
{t('app-footer.nav-title')}
{t('app-footer.follow-us-title')}
</li>
{navigation.map(
(link, index) =>
(!link.includeRoutes ||
link.includeRoutes?.includes(displayLocation.pathname)) && (
<li
className="app-footer__link"
key={index}
role="link"
tabIndex="0"
onClick={() => handleNavClick(link)}
onKeyDown={event => {
switch (event.code) {
case 'Enter':
handleNavClick(link);
return;

default:
return;
}
}}
>
{t(link.textKey)}
</li>
),
)}
</>
</ul>
<ul className="app-footer__links-list">
<li className="app-footer__list-title">
{t('app-footer.follow-us-title')}
</li>
<li>
<a
className="app-footer__link"
href={CONFIG.discordLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-footer.discord')}</span>
<svg className="app-footer__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
</li>
<li>
<a
className="app-footer__link"
href={CONFIG.twitterLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-footer.twitter')}</span>
<svg className="app-footer__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
</li>
<li>
<a
className="app-footer__link"
href={CONFIG.telegramLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-footer.telegram')}</span>
<svg className="app-footer__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
</li>
</ul>
<li>
<a
className="app-footer__link"
href={CONFIG.discordLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-footer.discord')}</span>
<svg className="app-footer__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
</li>
<li>
<a
className="app-footer__link"
href={CONFIG.twitterLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-footer.twitter')}</span>
<svg className="app-footer__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
</li>
<li>
<a
className="app-footer__link"
href={CONFIG.telegramLink}
target="_blank"
rel="nofollow noopener noreferrer"
>
<span>{t('app-footer.telegram')}</span>
<svg className="app-footer__link-icon" height="12" width="12">
<use href="/icons/sprite.svg#icon-arrow-right"></use>
</svg>
</a>
</li>
</ul>
<div className="app-footer__links-list">
<p className="app-footer__list-title">
{t('app-footer.newsletter-title')}
</p>
<SubscribeForm />
</div>
</div>
<AppButton
className="app-footer__scroll-to-top-btn"
onClick={onScrollToTop}
Expand Down
Loading

0 comments on commit d748867

Please sign in to comment.