111 lines
6.0 KiB
TypeScript
111 lines
6.0 KiB
TypeScript
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 { Link } from "../components/link";
|
||
import { Card } from "../components/card";
|
||
|
||
const data = [
|
||
{
|
||
id: Math.random().toString(),
|
||
title: "Рик Санчез",
|
||
subTitle: "Главный герой",
|
||
body: "Он ученый-изобретатель, который путешествует по разным мирам и измерениям, используя свою уникальную машину для путешествий. Рик обладает острым умом и нестандартным мышлением, что позволяет ему решать самые сложные проблемы. Он также известен своим цинизмом и сарказмом, что делает его персонажем с ярким характером.",
|
||
image: "rick",
|
||
link: "https://en.wikipedia.org/wiki/Rick_Sanchez",
|
||
},
|
||
{
|
||
id: Math.random().toString(),
|
||
title: "Морти Смит",
|
||
subTitle: "Внук Рика",
|
||
body: "Обычный подросток, который часто оказывается втянутым в приключения своего дедушки. Морти часто испытывает трудности с принятием решений и не всегда понимает, что происходит вокруг него. Однако, несмотря на свою неопытность, Морти часто оказывается ключевым элементом в решении сложных ситуаций.",
|
||
image: "morty",
|
||
link: "https://en.wikipedia.org/wiki/morty",
|
||
},
|
||
{
|
||
id: Math.random().toString(),
|
||
title: "Бет Смит",
|
||
subTitle: "Мать Морти",
|
||
body: "Бет Смит также является мамой Морти. Она врач и мать-одиночка, которая старается поддерживать свою семью. Бет часто оказывается в конфликте с Риком из-за его безответственного поведения и постоянных приключений. Однако, несмотря на все трудности, Бет всегда готова прийти на помощь своей семье.",
|
||
image: "beth",
|
||
link: "https://en.wikipedia.org/wiki/beth",
|
||
},
|
||
{
|
||
id: Math.random().toString(),
|
||
title: "Джерри Смит",
|
||
subTitle: "Отец Морти",
|
||
body: "Джерри Смит - муж Бет. Он обычный человек, который старается справиться с жизнью в семье, полной необычных персонажей. Джерри часто оказывается в тени Рика и Морти, но он всегда готов поддержать свою семью в трудные моменты.",
|
||
image: "jerry",
|
||
link: "https://en.wikipedia.org/wiki/beth",
|
||
},
|
||
{
|
||
id: Math.random().toString(),
|
||
body: 'Семья Смитов - это только часть персонажей, представленных в сериале "Rick and Morty". В сериале также присутствуют множество других интересных и запоминающихся персонажей, каждый из которых имеет свою уникальную историю и характер. На этой странице вы сможете узнать больше о каждом персонаже, его истории и роли в сериале. Мы также предлагаем вам возможность ознакомиться с интересными фактами о создании сериала и его персонажах. Присоединяйтесь к нам и погрузитесь в увлекательный мир "Rick and Morty"!',
|
||
},
|
||
];
|
||
|
||
export const LandingPage = () => {
|
||
return (
|
||
<>
|
||
<header id="header">
|
||
<img
|
||
className="logo"
|
||
height="44px"
|
||
width="227"
|
||
src={logo4x}
|
||
alt="Логотип. Надпись Рик и Морти"
|
||
srcSet={`
|
||
${logo} 220w,
|
||
${logo2x} 445w,
|
||
${logo4x} 880w,
|
||
`}
|
||
sizes="
|
||
(max-width: 240px) 100px,
|
||
(min-width: 320px) 440px,
|
||
(min-width: 520px) 880px
|
||
"
|
||
/>
|
||
<NavPanel />
|
||
</header>
|
||
|
||
<main className="main">
|
||
<header className="card card-main">
|
||
<div className="card-text">
|
||
<h1 className="h1">
|
||
Персонажи из <br />
|
||
<span className="brand-text">огурчиковой вселенной</span>
|
||
</h1>
|
||
|
||
<p className="p card--text__p">
|
||
На этой странице представлены персонажи из сериала “
|
||
<Link href="#">Rick and Morty</Link>
|
||
”. Этот популярный анимационный сериал, созданный Джастином
|
||
Ройландом и Дэном Хармоном, рассказывает о приключениях Рика
|
||
Санчеза, гениального и эксцентричного ученого, и его внука Морти
|
||
Смита.
|
||
</p>
|
||
</div>
|
||
<img className="card--img" src={cucumber} alt="" />
|
||
</header>
|
||
{data.map((item, index) => (
|
||
<Card
|
||
directionReverse={index % 2 === 0}
|
||
key={item.id}
|
||
title={item.title}
|
||
image={item.image}
|
||
link={item.link}
|
||
subTitle={item.subTitle}
|
||
>
|
||
{item.body}
|
||
</Card>
|
||
))}
|
||
</main>
|
||
|
||
<footer className="page-footer"></footer>
|
||
</>
|
||
);
|
||
};
|