ktl-657 refactor: Next.js structure

README.md

@@ -80,3 +80,13 @@ You can:
 [project-url]: https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub
 [project-badge]: http://jb.gg/badges/official.svg
 [slack-url]: http://slack.kotlinlang.org
+
+## Pages on Next.js
+
+You can find all pages in the "pages" directory.
+
+Projects Structure:
+- **Components**. The building blocks.
+- **Blocks**. Blocks are groups of components joined together to form a relatively complex, distinct section of an interface.
+- **Layouts**. Layouts consist mostly of groups of Blocks and Components stitched together to form pages.
+- **Pages**. Each page is associated with a route based on its file name.

components/community-banner/community-banner.module.css → blocks/community/community-banner/community-banner.module.css

@@ -1,6 +1,3 @@
-.banner {
-}
-
 .content {
     margin: 24px 0 var(--ktl-grid-gutter);
     max-width: 720px;

components/community-banner/community-banner.tsx → blocks/community/community-banner/community-banner.tsx

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import Image from 'next/image';
 
 import styles from './community-banner.module.css';
-import communityBanner from '../../public/images/community-banner.png';
+import communityBanner from '../../../public/images/community-banner.png';
 
 interface CommunityBannerProps {
     title: string;

pages/community/events.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {CommunityLayout} from "../../components/layout/community-layout";
+import {CommunityLayout} from "../../layouts/community-layout";
 
 function UserGroups() {
     return (

pages/community/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
-import {CommunityBanner} from '../../components/community-banner/community-banner';
-import {CommunityLayout} from "../../components/layout/community-layout";
+import {CommunityBanner} from '../../blocks/community/community-banner/community-banner';
+import {CommunityLayout} from "../../layouts/community-layout";
 
 function Index() {
     return (

pages/community/user-groups.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import {CommunityLayout} from "../../components/layout/community-layout";
-import {KugsBanner} from "../../components/kugs-banner/kugs-banner";
+import {CommunityLayout} from "../../layouts/community-layout";
+import {KugsBanner} from "../../blocks/community/kugs-banner/kugs-banner";
 
 function UserGroups() {
     return (