package.json

@@ -1,6 +1,6 @@
 {
     "name": "r-and-m",
-    "version": "0.0.0",
+    "version": "1.0.0",
     "description": "![Рик огурчик!!!](./docs/cucumber.webp)",
     "main": "./src/index.tsx",
     "directories": {

src/components/card/card.style.ts

@@ -1,56 +0,0 @@
-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-export const Wrapper = styled.article`
-  display: flex;
-  flex-direction: column;
-  margin-top: 24px;
-  border-radius: 30px;
-  box-shadow: 0 0 26px 2px #0000001c;
-  background: rgba(255, 255, 255, 0.59);
-  padding: 24px;
-`;
-
-export const CardImage = styled.img<{ directionReverse: boolean }>`
-  width: 300px;
-  height: 300px;
-  margin-left: 0;
-  margin-right: auto;
-  
-  ${props => props.directionReverse && css`
-    margin-left: auto;
-    margin-right: 0;
-  `}
-`;
-
-export const Header = styled.header`
-  display: flex;
-  justify-content: space-between;
-  font-size: 24px;
-  font-weight: 800;
-  align-items: center;
-`;
-
-export const SubHeader = styled.h2`
-  color: #659a26;
-  font-size: 24px;
-`;
-
-export const Content = styled.div<{ directionReverse: boolean }>`
-  display: flex;
-  flex-direction: row;
-  gap: 40px;
-
-  ${props => {
-    if (props.directionReverse) {
-      return css`
-        flex-direction: row-reverse;
-      `;
-    }
-  
-  }}
-`;
-
-export const Text = styled.p`
-  font-size: 24px;
-`;

src/components/card/card.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-
-import { landing } from "../../assets/images";
-import { Link } from "../link";
-
-import {
-  Header,
-  Wrapper,
-  SubHeader,
-  Content,
-  CardImage,
-  Text,
-} from "./card.style";
-
-export const Card = ({
-  title,
-  subTitle,
-  children,
-  image,
-  link,
-  directionReverse,
-}) => (
-  <Wrapper>
-    <Header>
-      {title && (
-        <h1 className="h1">
-          <Link inheritColor href={link}>
-            {title}
-          </Link>
-        </h1>
-      )}
-      {subTitle && <SubHeader>{subTitle}</SubHeader>}
-    </Header>
-    <Content directionReverse={directionReverse}>
-      {image && (
-        <CardImage directionReverse={directionReverse} src={landing[image]} />
-      )}
-      <Text>{children}</Text>
-    </Content>
-  </Wrapper>
-);
-
-Card.defaultProps = {
-  title: void 0,
-  subTitle: void 0,
-  image: void 0,
-  link: void 0,
-  directionReverse: false,
-};

src/components/card/index.ts

@@ -1 +0,0 @@
-export { Card } from './card'

src/components/link/link.styled.ts

@@ -1,33 +1,19 @@
-import styled from "@emotion/styled";
+import styled from "@emotion/styled"
-import { css } from "@emotion/react";
+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) =>
+  color: ${(props: any) => props.contrast ? 'var(--text-contrast)' : 'var(--dark-link)'};
-    props.contrast ? "var(--text-contrast)" : "var(--dark-link)"};
 
-  ${(props) => {
+  ${props => {
     if (props.contrast) {
-      return css`
+     return css`
-        &:hover {
+       &:hover {
-          color: var(--dark-link);
+         color: var(--dark-link);
-        }
+       }
-      `;
+     `
-    }
+   }
-  }}
-
-  ${(props) => {
-    if (props.inheritColor) {
-      return css`
-        font-weight: inherit;
-        color: inherit;
-        text-decoration: inherit;
-      `;
-    }
   }}
 `;

src/components/link/link.tsx

@@ -3,33 +3,17 @@ import React, { useMemo } from "react";
 import { externalIcon } from '../../assets/icons'
 
 import { StyledLink } from './link.styled'
+// import './style.css'
 
-interface LinkProps {
+export const Link = (props) => {
-  href: string;
+  // const className = 'link' + (props.contrast ? ' link__contrast' : '')
-  children: React.ReactNode;
+  
-  contrast?: boolean;
+  const isExternal = useMemo(() => props.href.startsWith('http'), [props.href]);
-  inheritColor?: boolean;
-}
-
-export const Link = (props: LinkProps) => {
-  const isExternal = useMemo(() => props.href?.startsWith('http'), [props.href]);
-
-  const linkProps: any = {}
-
-  if (isExternal) {
-    linkProps.target = '_blank'
-    linkProps.rel = 'noopener noreferrer'
-  }
 
   return (
-    <StyledLink inheritColor={props.inheritColor} contrast={props.contrast} href={props.href} {...linkProps}>
+    <StyledLink contrast={props.contrast} href={props.href}>
       {props.children}
-      {isExternal && <img src={externalIcon} alt="external link icon" />}
+      {isExternal && <img src={externalIcon} alt="external" />}
     </StyledLink>
   );
 };
-
-Link.defaultProps = {
-  contrast: false,
-  inheritColor: false,
-}

src/components/link/style.css

@@ -0,0 +1,10 @@
+.link {
+  font-weight: 400;
+  text-decoration: underline;
+  text-decoration-skip-ink: none;
+  color: var(--dark-link);
+}
+
+.link__contrast {
+  color: var(--text-contrast);
+}

src/pages/landing.tsx

@@ -1,51 +1,52 @@
 import React from "react";
 
 import { NavPanel } from "../components/nav-panel";
+
 import logo from "../assets/logo_1x.png";
-import cucumber from "../assets/cucumber.png";
 import logo2x from "../assets/logo_2x.png";
 import logo4x from "../assets/logo_4x.png";
+import cucumber from "../assets/cucumber.png";
 import { Link } from "../components/link";
-import { Card } from "../components/card";
+// directionReverse: false,
 
 const data = [
   {
     id: Math.random().toString(),
-    title: "Рик Санчез",
+    title: 'Рик Санчез',
-    subTitle: "Главный герой",
+    subTitle: 'Главный герой',
-    body: "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
+    body: 'Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.',
-    image: "rick",
+    image: 'rick',
-    link: "https://en.wikipedia.org/wiki/Rick_Sanchez",
+    link: 'https://en.wikipedia.org/wiki/Rick_Sanchez',
   },
   {
     id: Math.random().toString(),
-    title: "Морти Смит",
+    title: 'Морти Смит',
-    subTitle: "Внук Рика",
+    subTitle: 'Внук Рика',
-    body: "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
+    body: 'Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.',
-    image: "morty",
+    image: 'morty',
-    link: "https://en.wikipedia.org/wiki/morty",
+    link: 'https://en.wikipedia.org/wiki/morty',
   },
   {
     id: Math.random().toString(),
-    title: "Бет Смит",
+    title: 'Бет Смит',
-    subTitle: "Мать Морти",
+    subTitle: 'Мать Морти',
-    body: "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
+    body: 'Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.',
-    image: "beth",
+    image: 'beth',
-    link: "https://en.wikipedia.org/wiki/beth",
+    link: 'https://en.wikipedia.org/wiki/beth',
   },
   {
     id: Math.random().toString(),
-    title: "Джерри Смит",
+    title: 'Джерри Смит',
-    subTitle: "Отец Морти",
+    subTitle: 'Отец Морти',
-    body: "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
+    body: 'Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.',
-    image: "jerry",
+    image: 'jerry',
-    link: "https://en.wikipedia.org/wiki/beth",
+    link: 'https://en.wikipedia.org/wiki/beth',
   },
   {
     id: Math.random().toString(),
     body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!',
   },
-];
+]
 
 export const LandingPage = () => {
   return (
@@ -90,18 +91,24 @@ export const LandingPage = () => {
           </div>
           <img className="card--img" src={cucumber} alt="" />
         </header>
-        {data.map((item, index) => (
+        <article className="card card__toRight">
-          <Card
+          <div className="card-text">
-            directionReverse={index % 2 === 0}
+            <h1 className="h1">
-            key={item.id}
+              Персонажи из <br />
-            title={item.title}
+              <span className="brand-text">огурчиковой вселенной</span>
-            image={item.image}
+            </h1>
-            link={item.link}
+
-            subTitle={item.subTitle}
+            <p className="p card--text__p">
-          >
+              На этой странице представлены персонажи из сериала “
-            {item.body}
+              <Link href="https://en.wikipedia.org/wiki/Rick_Sanchez">Rick and Morty</Link>
-          </Card>
+              ”. Этот популярный анимационный сериал, созданный Джастином
-        ))}
+              Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
+              Санчеза, гениального и эксцентричного ученого, и его внука Морти
+              Смита.
+            </p>
+          </div>
+          <img className="card--img" src={cucumber} alt="" />
+        </article>
       </main>
 
       <footer className="page-footer"></footer>