Merge pull request #31 from denlove/FM-30

FM-30: add mock data for marketing page, edit README.md, some minor fixes

README.md

@@ -6,7 +6,7 @@ First, run the development server:
 
 ```bash
 npm run dev
-# or
+# or like in this project
 yarn dev
 # or
 pnpm dev
@@ -16,10 +16,10 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the
 
 ## Docker
 
-### `docker compose up`
+### `docker compose up --build -d`
 
 Builds, (re)creates, starts, and attaches to containers for a service. You can use flag `-d`, which means detached mode: run containers in the background.
 
 ### `docker compose exec web bash`
 
-If you want to dive deeper, use it after. So you can see container files and run additional commands inside.
+`web` - main service name in your docker-compose.yml . If you want to dive deeper into running container, use it after. So you can see container files and run additional commands inside.

src/app/not-found.tsx

@@ -1,5 +1,13 @@
-const NotFound = () => {
-    return <h1>404: Not found</h1>
+import { Metadata } from 'next'
+import PageContent from '@/modules/PageContent'
+import { NOT_FOUND_PAGE_CONTENT } from '@/utils/pageContent'
+
+export const metadata: Metadata = {
+    title: 'FxMath - Not Found ;/',
+}
+
+const NotFoundPage = () => {
+    return <PageContent {...NOT_FOUND_PAGE_CONTENT} />
 }
 
-export default NotFound
+export default NotFoundPage

src/components/ContentBlock/ContentBlock.module.scss

@@ -7,12 +7,17 @@
 
     &__text {
         @include text.textStyle(
-            var(--fs-20),
+            var(--fs-25),
             var(--ff-L),
             normal,
             var(--first-text-color)
         );
+        line-height: 2rem;
         width: 50%;
+        border-radius: var(--radius-30);
+        padding: 1.5rem;
+        background-color: var(--first-background-color);
+        height: fit-content;
     }
 
     &__img-wrap {

src/components/ContentBlock/ContentBlock.tsx

@@ -8,9 +8,13 @@ const ContentBlock = ({ text, img }: ContentBlock) => {
     return (
         <div className={style.content}>
             <p className={style.content__text}>{text}</p>
-            <div className={style['content__img-wrap']}>
-                <FaceImage url={img} className='second-img' />
-            </div>
+            {img ? (
+                <div className={style['content__img-wrap']}>
+                    <FaceImage url={img} className='second-img' />
+                </div>
+            ) : (
+                <></>
+            )}
         </div>
     )
 }

src/utils/pageContent.ts

@@ -5,17 +5,28 @@ import FaceImage6 from '../../public/assets/images/Image6.jpg'
 export interface IPageContent {
     title: string
     text: string
-    img: StaticImageData
+    img?: StaticImageData
 }
 
+// 'About us' page mock data
 export const ABOUT_PAGE_CONTENT: IPageContent = {
-    title: '🪄 About',
-    text: 'About page content',
+    title: '🎀 About us',
+    text: "Hey, I'm front-end developer. And it's a pet-project, where you can solve unlimited, endless, \
+and infinite equations. Let's practice with us right now.\nBy the way, there will be even more features in the future. \
+My project uses tech stack like React, NextJS, Typescript and others.\nThanks for your user experience!",
     img: FaceImage5,
 }
 
-export const CONTACTS_PAGE_CONTENT = {
-    title: '📱 Contacts',
-    text: 'Contacts page content',
+// 'Contacts' page mock data
+export const CONTACTS_PAGE_CONTENT: IPageContent = {
+    title: '🎙️ Contacts',
+    text: "Hi, I'm developer of this study project. You can contact me on GitHub. I'm open to any cooperations. \
+Glad to work with you, and happy to hear your suggestions.",
     img: FaceImage6,
 }
+
+// 'Not Found' page mock data
+export const NOT_FOUND_PAGE_CONTENT: IPageContent = {
+    title: '🧐 404',
+    text: 'WoW. Page not found :/',
+}