update: job detail

src/app/+job/feature/+job_detail/job-detail.component.ts

@@ -9,15 +9,37 @@ import { Jobs } from '../../data-access/model/job.model';
     selector: 'job-detail',
     standalone: true,
     template: `
-    <div class="tw-max-w-3xl tw-mx-auto">
-    <p> {{ job?.company }} </p>
-    <p> {{ job?.company_logo }} </p>
-    <p> {{ job?.id }} </p>
-    <p> {{ job?.company }} </p>
-    <p> {{ job?.company }} </p>
-    <p> {{ job?.company }} </p>
-    <p> {{ job?.company }} </p>
-    <p> {{ job?.company }} </p>
+    <div class="tw-max-w-4xl tw-mx-auto tw-my-3">
+        <div class="tw-w-full tw-gap-y-2 tw-flex tw-flex-col">
+            <p class="tw-text-2xl tw-font-bold tw-border-b">{{ job?.title }}</p>
+            <p> {{ job?.created_at }} by {{ job?.company }} </p>
+            <div class="tw-flex tw-gap-y-2 tw-gap-x-3">
+                <span class="tw-bg-black tw-p-2 tw-rounded-lg tw-text-white tw-my-auto">{{ job?.type }}</span>
+                <span class="tw-my-auto"><i class="fa-solid fa-location-dot"></i> {{ job?.location }} </span>
+            </div>
+            <div>
+                <div class="tw-bg-sky tw-rounded-lg tw-px-3 tw-py-2 tw-flex tw-gap-x-6 tw-shadow-xl">
+                    <img class="tw-rounded-full tw-object-cover tw-h-20 tw-w-20" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTAGvRhdg1vaZyhkn5zzE7p35e70SUgv0TVCw&s">
+                    <div>
+                        <div class="tw-border-b tw-flex tw-justify-between">
+                            <p class="tw-text-lg tw-font-semibold"> {{ job?.company }}</p>
+                            <span>
+                                <a class="tw-text-link tw-font-semibold" href="{{job?.company_url}}">Website</a>
+                                &nbsp;
+                                <a class="tw-text-link tw-font-semibold" href="{{job?.company_url}}">How to apply</a>
+                            </span>
+                        </div>
+                        <div>
+                            <p class="tw-text-lg"> {{ job?.company }} is a company that we are creating values through bla bla bla bla
+                            bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="tw-mt-6 tw-text-lg" [innerHTML]="job?.description">
+                    
+                </div>
+            </div>
+        </div>
     </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -41,16 +63,16 @@ export class JobDetailComponent implements OnInit {
 
     getJob() {
         this._jobService.jobsGetOne(this.id!)
-        .pipe(
-            tap((response) => {
-                this.job = response?.responseData;
-                
-                this._cdr.markForCheck();
-            }),
-            catchError((err) => {
-                return of(null);
-            })
-        )
-        .subscribe();
+            .pipe(
+                tap((response) => {
+                    this.job = response?.responseData;
+
+                    this._cdr.markForCheck();
+                }),
+                catchError((err) => {
+                    return of(null);
+                })
+            )
+            .subscribe();
     }
 }
\ No newline at end of file

src/app/+shell/ui/layout.component.ts

@@ -33,7 +33,9 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
       <nz-layout>
       <meu-header></meu-header>
       <div class="tw-relative tw-min-h-[92dvh]">
-        <router-outlet></router-outlet>
+        <div class="tw-max-w-5xl tw-bg-white tw-mx-auto">
+          <router-outlet></router-outlet>
+        </div>
       </div>
       <meu-footer></meu-footer>
       </nz-layout>

src/index.html

@@ -6,6 +6,9 @@
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
+          integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
+          crossorigin="anonymous" referrerpolicy="no-referrer"/>
 </head>
 <body>
   <app-root></app-root>

tailwind.config.js

@@ -28,6 +28,8 @@ module.exports = {
     colors: {
       white: "#ffffff",
       black: "#000000",
+      sky: "#a3e4ff",
+      link: "#1484b2"
     },
     fontFamily: {
       "roboto-black": ["Roboto-Black", "sans-serif"],