feat: contact scroll and vertical align element ml-383 (#386)

Co-authored-by: Farid Shabanov <[email protected]>

Author: iLavruk

apps/frontend/src/libs/enums/landing-section.enum.ts

@@ -1,6 +1,7 @@
 import { ContactInfo } from "./enums.js";
 
 const LandingSection = {
+	CONTACTS: "#contacts",
 	EMAIL: ContactInfo.EMAIL,
 	FEATURES: "#features",
 	HOME: "#home",

apps/frontend/src/modules/landing/libs/constants/header-links.constants.ts

@@ -1,9 +1,9 @@
-import { AppRoute, LandingSection } from "~/libs/enums/enums.js";
+import { LandingSection } from "~/libs/enums/enums.js";
 import { type NavLinkType } from "~/modules/landing/landing.js";
 
 const HEADER_LINKS: NavLinkType[] = [
 	{ label: "Features", to: LandingSection.FEATURES },
-	{ label: "Contacts", to: AppRoute.ROOT },
+	{ label: "Contacts", to: LandingSection.CONTACTS },
 ];
 
 export { HEADER_LINKS };

apps/frontend/src/pages/landing/components/landing-footer/landing-footer.tsx

@@ -14,7 +14,10 @@ const LandingFooter: React.FC<Properties> = ({ className }: Properties) => {
 	const year = new Date().getFullYear();
 
 	return (
-		<footer className={getValidClassNames(styles["landing-footer"], className)}>
+		<footer
+			className={getValidClassNames(styles["landing-footer"], className)}
+			id="contacts"
+		>
 			<div className={styles["landing-footer__inner"]}>
 				<div aria-label="Brand" className={styles["landing-footer__brand"]}>
 					<Logo hasLink size={LogoSize.SMALL} theme={LogoTheme.LIGHT} />

apps/frontend/src/pages/landing/components/landing-header/styles.module.css

@@ -6,7 +6,7 @@
 	display: grid;
 	grid-template-columns: auto 1fr auto;
 	column-gap: 52px;
-	align-items: start;
+	align-items: center;
 	max-width: var(--container-max);
 	padding: 24px var(--container-gutter-lg) 34px;
 	margin: 0 auto;
@@ -54,7 +54,6 @@
 	display: flex;
 	gap: 17px;
 	align-items: center;
-	transform: translateY(12px);
 }
 
 .landing-header__button {
@@ -85,6 +84,7 @@
 	.landing-header__inner {
 		grid-template-columns: auto 1fr;
 		column-gap: 0;
+		align-items: start;
 		padding: 24px var(--container-gutter-sm) 34px;
 	}