(#1) Добил вёрстку центральных блоков landing

src/components/link/link.styled.ts

@@ -1,19 +1,33 @@
-import styled from "@emotion/styled"
-import { css } from '@emotion/react'
+import styled from "@emotion/styled";
+import { css } from "@emotion/react";
 
-export const StyledLink = styled.a`
+export const StyledLink = styled.a<{
+  contrast?: boolean;
+  inheritColor?: boolean;
+}>`
   font-weight: 400;
   text-decoration: underline;
   text-decoration-skip-ink: none;
-  color: ${(props: any) => props.contrast ? 'var(--text-contrast)' : 'var(--dark-link)'};
+  color: ${(props: any) =>
+    props.contrast ? "var(--text-contrast)" : "var(--dark-link)"};
 
-  ${props => {
+  ${(props) => {
     if (props.contrast) {
-     return css`
-       &:hover {
-         color: var(--dark-link);
-       }
-     `
-   }
+      return css`
+        &:hover {
+          color: var(--dark-link);
+        }
+      `;
+    }
+  }}
+
+  ${(props) => {
+    if (props.inheritColor) {
+      return css`
+        font-weight: inherit;
+        color: inherit;
+        text-decoration: inherit;
+      `;
+    }
   }}
 `;

src/components/link/link.tsx

@@ -4,7 +4,14 @@ import { externalIcon } from '../../assets/icons'
 
 import { StyledLink } from './link.styled'
 
-export const Link = (props) => {
+interface LinkProps {
+  href: string;
+  children: React.ReactNode;
+  contrast?: boolean;
+  inheritColor?: boolean;
+}
+
+export const Link = (props: LinkProps) => {
   const isExternal = useMemo(() => props.href?.startsWith('http'), [props.href]);
 
   const linkProps: any = {}
@@ -15,9 +22,14 @@ export const Link = (props) => {
   }
 
   return (
-    <StyledLink contrast={props.contrast} href={props.href} {...linkProps}>
+    <StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
       {props.children}
       {isExternal && <img src={externalIcon} alt="external link icon" />}
     </StyledLink>
   );
 };
+
+Link.defaultProps = {
+  contrast: false,
+  inheritColor: false,
+}