Add home page layout

src/app/[locale]/page.tsx

@@ -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>
+    </>
+  );
 }

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/shared/ui/Container.tsx

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+interface Props {
+  className?: string;
+}
+
+export const Container: React.FC<React.PropsWithChildren<Props>> = ({
+  className,
+  children,
+}) => {
+  return (
+    <div className={cn("mx-auto max-w-[1280px] px-2", className)}>
+      {children}
+    </div>
+  );
+};

src/shared/ui/Title.tsx

@@ -0,0 +1,39 @@
+import clsx from "clsx";
+import React from "react";
+
+type TitleSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+
+interface Props {
+  size?: TitleSize;
+  className?: string;
+  text: string;
+}
+
+export const Title: React.FC<Props> = ({ text, size = "sm", className }) => {
+  const mapTagBySize: Record<TitleSize, React.ElementType> = {
+    xs: "h5",
+    sm: "h4",
+    md: "h3",
+    lg: "h2",
+    xl: "h1",
+    "2xl": "h1",
+  };
+
+  const mapClassNameBySize: Record<TitleSize, string> = {
+    xs: "text-[16px]",
+    sm: "text-[22px]",
+    md: "text-[26px]",
+    lg: "text-[32px]",
+    xl: "text-[40px]",
+    "2xl": "text-[48px]",
+  };
+
+  const Tag = mapTagBySize[size] || "h4";
+  const sizeClassName = mapClassNameBySize[size] || "text-[22px]";
+
+  return React.createElement(
+    Tag,
+    { className: clsx(sizeClassName, className) },
+    text
+  );
+};

src/shared/ui/index.ts

@@ -0,0 +1,2 @@
+export { Container } from "./Container";
+export { Title } from "./Title";

src/widgets/Footer/Footer.tsx

@@ -6,14 +6,14 @@ import app_store_btn from "./assets/app-store-btn.svg";
 import play_market_btn from "./assets/play-market-btn.svg";
 import { Link } from "@/shared/config/navigation";
 import { useTranslations } from "next-intl";
-import { LINKS } from "@/shared/variables/links_footer";
+import { LINKS } from "@/shared/variables/links";
 
 const Footer = () => {
   const t = useTranslations("general");
   const tDisclaimer = useTranslations("disclaimer");
   const tRights = useTranslations("rights");
   return (
-    <footer className="px-12 py-20 grid grid-cols-4 gap-[30px] bg-custom-dark">
+    <footer className="px-12 py-20 grid grid-cols-4 gap-[30px] bg-[#0F172A]">
       <div className="flex flex-col gap-6">
         <p className="text-white font-normal">© {tRights("text")}</p>
         <p className="text-white font-normal">{tDisclaimer("text")}</p>
@@ -60,9 +60,6 @@ const Footer = () => {
               </Link>
             ))}
           </li>
-          <li className="h-fit flex justify-start text-base text-[#e2e8f0] font-normal leading-[140%] items-center gap-4">
-            Photo By ThomasG, CC BY-SA 3.0
-          </li>
         </ul>
       </div>
 

src/widgets/Navbar/NavMenu/NavMenu.tsx

@@ -46,8 +46,8 @@ const NavMenu: React.FC<INavMenuProps> = ({ setOpenMenu }: INavMenuProps) => {
   ];
 
   return (
-    <nav className="p-[48px] w-full h-full min-h-[600px] fixed left-0 flex flex-col gap-6 bg-white scroll inset-y-0 right-0 z-50 overflow-y-auto">
-      <div className="flex items-center justify-between">
+    <nav className="p-[48px] w-full h-full min-h-[600px] fixed left-0 top-[120px] flex flex-col gap-6 bg-white scroll inset-y-0 right-0 z-50 overflow-y-auto">
+      {/* <div className="flex items-center justify-between">
         <Link className="-m-1.5 p-1.5" href={"/"}>
           <Image src={logo} alt="Logo" className="h-8 w-auto" />
         </Link>
@@ -57,7 +57,7 @@ const NavMenu: React.FC<INavMenuProps> = ({ setOpenMenu }: INavMenuProps) => {
         >
           <Image src={cross} alt="cross" />
         </button>
-      </div>
+      </div> */}
       {LINKS().map((link) => (
         <Link
           onClick={() => setOpenMenu(false)}

src/widgets/Navbar/Navbar.tsx

@@ -16,6 +16,7 @@ import founded_en from "./assets/founded-en.png";
 import founded_kg from "./assets/founded-kg.png";
 import { useParams } from "next/navigation";
 import NavAuth from "./NavAuth/NavAuth";
+import { Container } from "@/shared/ui";
 
 const Navbar = () => {
   const pathname = usePathname();
@@ -30,44 +31,46 @@ const Navbar = () => {
 
   return (
     <header className="bg-white">
-      <nav className="mx-auto flex items-center justify-between py-6 lg:px-[90px] px-[90px] mm:px-[20px]">
-        <div className="flex items-center gap-[10px]">
-          <Link href="/">
-            <Image src={logo} alt="Logo" className="navbar__logo-ti" />
-          </Link>
-          <Image
-            className="mt-[30px] h-[120px] w-[120px] inline-block mr-[10px] object-cover"
-            src={FOUNDED[locale as string]}
-            alt="Founded by EU Image"
-          />
-          <NavLanguage />
-        </div>
-        <nav className="hidden lg:flex lg:gap-x-6">
-          {LINKS().map((link) => (
-            <Link
-              className={`text-black opacity-0.5 size-4 font-normal min-w-[150px] flex justify-center${
-                pathname === link.pathname ? "opacity-1 font-extrabold" : ""
-              }`}
-              key={link.id}
-              href={link.pathname}
-            >
-              {link.pagename}
+      <Container>
+        <nav className="mx-auto flex items-center justify-between py-6 mm:px-[20px]">
+          <div className="flex items-center gap-[10px]">
+            <Link href="/">
+              <Image src={logo} alt="Logo" className="navbar__logo-ti" />
             </Link>
-          ))}
+            <Image
+              className="mt-[30px] h-[120px] w-[120px] inline-block mr-[10px] object-cover"
+              src={FOUNDED[locale as string]}
+              alt="Founded by EU Image"
+            />
+            <NavLanguage />
+          </div>
+          <nav className="hidden lg:flex lg:gap-x-6">
+            {LINKS().map((link) => (
+              <Link
+                className={`text-black opacity-0.5 size-4 font-normal min-w-[150px] flex justify-center${
+                  pathname === link.pathname ? "opacity-1 font-extrabold" : ""
+                }`}
+                key={link.id}
+                href={link.pathname}
+              >
+                {link.pagename}
+              </Link>
+            ))}
+          </nav>
+          <div className="hidden lg:flex items-center gap-6">
+            <NavAuth setOpenMenu={setOpenMenu} />
+          </div>
+
+          <button
+            onClick={() => setOpenMenu((prev) => !prev)}
+            className="flex lg:hidden"
+          >
+            <Image src={openMenu ? cross : menu} alt="menu icon" />
+          </button>
+
+          {openMenu && <NavMenu setOpenMenu={setOpenMenu} />}
         </nav>
-        <div className="hidden lg:flex items-center gap-6">
-          <NavAuth setOpenMenu={setOpenMenu} />
-        </div>
-
-        <button
-          onClick={() => setOpenMenu((prev) => !prev)}
-          className="hidden sm:flex"
-        >
-          <Image src={openMenu ? cross : menu} alt="menu icon" />
-        </button>
-
-        {openMenu && <NavMenu setOpenMenu={setOpenMenu} />}
-      </nav>
+      </Container>
     </header>
   );
 };