Add home page layout
This commit is contained in:
anime committed
1 parent
5bda172d1b
commit
d1308e066f
18 files changed
+307
-76
No files matched your search
+143
-1
@@ -1,5 +1,147 @@
|
||||
import { Container, Title } from "@/shared/ui";
|
||||
import document from "../../../public/assets/document-ui.png";
|
||||
import Image from "next/image";
|
||||
import CardImg from "../../../public/assets/Image.png";
|
||||
import Arrow from "../../../public/assets/arrow-right.png";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export default function Home() {
|
||||
return <main></main>;
|
||||
const t = useTranslations("home");
|
||||
|
||||
return (
|
||||
<>
|
||||
<Container className="mt-[52px] mb-[21px] max-w-[1280px]">
|
||||
<section
|
||||
className="bg-cover bg-center h-[517px] bg-no-repeat flex justify-center items-center text-white w-full px-5"
|
||||
style={{ background: "url('./assets/bg.png')" }}
|
||||
>
|
||||
<div className="max-w-[943px] text-center">
|
||||
<Title
|
||||
size="md"
|
||||
text={"Transparency International "}
|
||||
className="text-[24px] leading-8"
|
||||
/>
|
||||
<Title
|
||||
size="xl"
|
||||
text={"Название проекта "}
|
||||
className="font-extrabold leading-[76px]"
|
||||
/>
|
||||
<p className="leading-8">
|
||||
Torem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
|
||||
vulputate libero et velit interdum, ac aliquet odio mattis. Class
|
||||
aptent taciti sociosqu ad litora torquent per conubia nostra
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</Container>
|
||||
|
||||
<section className="bg-[#FAFCFF]">
|
||||
<Container className="flex flex-col justify-center items-center">
|
||||
<div className="mt-[49px] mb-[45px] max-w-[730px]">
|
||||
<Title
|
||||
size="2xl"
|
||||
text={t("instructions")}
|
||||
className="text-center text-black mb-[18px] leading-[60px] font-extrabold text-[40px]"
|
||||
/>
|
||||
<p className="text-center text-grey-text leading-[27px]">
|
||||
{t("instructionsInfo")}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-between gap-5 mb-[120px] flex-wrap sm:justify-center">
|
||||
<div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
|
||||
<div className="flex text-black gap-[18px] items-center mb-7">
|
||||
<Image src={document} alt="document" />
|
||||
<p className="leading-6">Участие в тендере</p>
|
||||
</div>
|
||||
<p className="text-grey-text">
|
||||
Инструкция по тому как участвовать в тендерах
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
|
||||
<div className="flex text-black gap-[18px] items-center mb-7">
|
||||
<Image src={document} alt="document" />
|
||||
<p className="leading-6">Подача жалобы</p>
|
||||
</div>
|
||||
<p className="text-grey-text">
|
||||
Инструкция по тому как подавать жалобы
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
|
||||
<div className="flex text-black gap-[18px] items-center mb-7">
|
||||
<Image src={document} alt="document" />
|
||||
<p className="leading-6">Подача жалобы</p>
|
||||
</div>
|
||||
<p className="text-grey-text">
|
||||
Инструкция по тому как подавать жалобы
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-white w-[296px] h-[179px] p-[22px] rounded-lg shadow-md">
|
||||
<div className="flex text-black gap-[18px] items-center mb-7">
|
||||
<Image src={document} alt="document" />
|
||||
<p className="leading-6">Подача жалобы</p>
|
||||
</div>
|
||||
<p className="text-grey-text">
|
||||
Инструкция по тому как подавать жалобы
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<Title
|
||||
text={t("articles")}
|
||||
className="mb-[32px] font-extrabold text-black leading-[60px] text-[40px]"
|
||||
size="lg"
|
||||
/>
|
||||
<section className="flex items-center gap-[33px] justify-between mb-[55px] flex-wrap">
|
||||
<article className="max-w-[393px] max-h-[508px] p-6 bg-white shadow-md text-grey-text rounded-md">
|
||||
<Image
|
||||
src={CardImg}
|
||||
alt="card"
|
||||
width={345}
|
||||
height={240}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<Title text="Worem ipsum dolor" className="mt-8 mb-3" />
|
||||
<p className="mb-12">
|
||||
Borem ipsum dolor sit amet, consectetur adipiscing elit. Borem
|
||||
ipsum dolor sit amet
|
||||
</p>
|
||||
<p className="text-sm">26.10.2023</p>
|
||||
</article>
|
||||
<article className="max-w-[393px] max-h-[508px] p-6 bg-white shadow-md text-grey-text rounded-md">
|
||||
<Image
|
||||
src={CardImg}
|
||||
alt="card"
|
||||
width={345}
|
||||
height={240}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<Title text="Worem ipsum dolor" className="mt-8 mb-3" />
|
||||
<p className="mb-12">
|
||||
Borem ipsum dolor sit amet, consectetur adipiscing elit. Borem
|
||||
ipsum dolor sit amet
|
||||
</p>
|
||||
<p className="text-sm">26.10.2023</p>
|
||||
</article>
|
||||
<article className="max-w-[393px] max-h-[508px] p-6 bg-white shadow-md text-grey-text rounded-md">
|
||||
<Image
|
||||
src={CardImg}
|
||||
alt="card"
|
||||
width={345}
|
||||
height={240}
|
||||
className="rounded-md"
|
||||
/>
|
||||
<Title text="Worem ipsum dolor" className="mt-8 mb-3" />
|
||||
<p className="mb-12">
|
||||
Borem ipsum dolor sit amet, consectetur adipiscing elit. Borem
|
||||
ipsum dolor sit amet
|
||||
</p>
|
||||
<p className="text-sm">26.10.2023</p>
|
||||
</article>
|
||||
</section>
|
||||
<button className="flex gap-4 items-center justify-center text-blue w-[280px] h-[50px] rounded-md border border-blue ml-auto mb-[120px]">
|
||||
{t("articlesBtn")} <Image src={Arrow} alt="arrow" />
|
||||
</button>
|
||||
</Container>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user