feat(home-page): adds starter for homepage

.gitignore

@@ -42,5 +42,5 @@ Thumbs.db
 .angular
 
 # Yarn Berry
-.yarn/cache
 .yarn/install-state.gz
+.yarn/cache

apps/www/project.json

@@ -14,7 +14,15 @@
         "main": "apps/www/src/main.ts",
         "polyfills": ["zone.js"],
         "tsConfig": "apps/www/tsconfig.app.json",
-        "assets": ["apps/www/src/favicon.ico", "apps/www/src/assets"],
+        "assets": [
+          "apps/www/src/favicon.ico",
+          "apps/www/src/assets",
+          {
+            "glob": "**/*.svg",
+            "input": "node_modules/@coreui/icons/sprites",
+            "output": "assets/core-ui"
+          }
+        ],
         "styles": ["apps/www/src/styles.css"],
         "scripts": []
       },

apps/www/src/app/app.component.css

@@ -0,0 +1,4 @@
+:host {
+  display: flex;
+  flex-direction: column;
+}

apps/www/src/app/app.component.html

@@ -1 +1,5 @@
-<router-outlet></router-outlet>
+<header app-masthead>
+</header>
+<main>
+  <router-outlet></router-outlet>
+</main>

apps/www/src/app/app.module.ts

@@ -1,17 +1,20 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { RouterModule } from '@angular/router';
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
 
-import { AppComponent } from './app.component';
-import { appRoutes } from './app.routes';
+import {AppComponent} from './app.component';
+import {appRoutes} from './app.routes';
+import {MastheadComponent} from "./components/masthead";
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
-    BrowserModule.withServerTransition({ appId: 'serverApp' }),
-    RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' }),
+    BrowserModule.withServerTransition({appId: 'serverApp'}),
+    RouterModule.forRoot(appRoutes, {initialNavigation: 'enabledBlocking'}),
+    MastheadComponent,
   ],
   providers: [],
   bootstrap: [AppComponent],
 })
-export class AppModule {}
+export class AppModule {
+}

apps/www/src/app/app.routes.ts

@@ -1,3 +1,10 @@
-import { Route } from '@angular/router';
+import {Route, Routes} from '@angular/router';
 
-export const appRoutes: Route[] = [];
+const home: Route = {
+  path: '',
+  loadComponent: () => import('./pages/home').then(mod => mod.HomePageComponent),
+}
+
+export const appRoutes: Routes = [
+  home,
+];

apps/www/src/app/components/container/container.component.css

@@ -0,0 +1,11 @@
+:host(.container) {
+  display: block;
+  margin: auto;
+  width: 100%;
+  max-width: var(--grid-max-width);
+  padding-inline: var(--grid-gutter);
+}
+
+:host(.container--wide) {
+  max-width: var(--grid-wide-max-width);
+}

apps/www/src/app/components/container/container.component.ts

@@ -0,0 +1,23 @@
+import {Component, HostBinding, Input} from "@angular/core";
+import {BooleanInput, coerceBooleanProperty} from "@angular/cdk/coercion";
+
+@Component({
+  selector: 'app-container',
+  template: `
+    <ng-content/>`,
+  styleUrls: ['./container.component.css'],
+  standalone: true,
+})
+export class ContainerComponent {
+
+  @HostBinding('class.container')
+  readonly hbClassContainer = true;
+
+  @HostBinding('class.container--wide')
+  get hbClassContainerWide() {
+    return coerceBooleanProperty(this.wide);
+  }
+
+  @Input() wide: BooleanInput = false
+
+}

apps/www/src/app/components/container/index.ts

@@ -0,0 +1 @@
+export * from './container.component';

apps/www/src/app/components/hero/hero.component.css

@@ -0,0 +1,59 @@
+:host(.hero) {
+  --_hero-bg-color: var(--color-plum-light);
+  --_hero-alt-bg-color: var(--color-ocean);
+  display: grid;
+  width: 100%;
+  grid-template-areas:
+    "body"
+    "foot";
+}
+
+.hero__body {
+  display: flex;
+  flex-direction: column;
+  place-items: center;
+  background-color: var(--_hero-bg-color);
+  grid-area: body;
+  padding-top: 20px;
+  position: relative;
+  z-index: 2;
+  text-align: center;
+}
+
+.hero__footer {
+  grid-area: foot;
+  height: 120px;
+  position: relative;
+  overflow: hidden;
+}
+
+.hero__footer-layer {
+  width: 5000px;
+  height: 300px;
+  position: absolute;
+  box-shadow: 12px 0 12px rgba(0 0 0 / 50%);
+}
+
+.hero__footer-layer--top {
+  bottom: 50px;
+  rotate: 3deg;
+  background-color: var(--_hero-bg-color);
+  translate: -50% 0;
+  left: 50%;
+  z-index: 1;
+}
+
+.hero__footer-layer--bottom {
+  width: 2000px;
+  left: -20px;
+  bottom: 50px;
+  rotate: -2deg;
+  background-color: var(--_hero-alt-bg-color);
+  z-index: 0;
+}
+
+@media (min-width: 48em) {
+  .hero__body{
+    padding: 0;
+  }
+}

apps/www/src/app/components/hero/hero.component.html

@@ -0,0 +1,10 @@
+<div class="hero__body">
+  <app-container>
+    <ng-content/>
+  </app-container>
+</div>
+
+<div class="hero__footer">
+  <div class="hero__footer-layer hero__footer-layer--top"></div>
+  <div class="hero__footer-layer hero__footer-layer--bottom"></div>
+</div>

apps/www/src/app/components/hero/hero.component.ts

@@ -0,0 +1,18 @@
+import {Component, HostBinding} from "@angular/core";
+import {ContainerComponent} from "../container";
+
+@Component({
+  selector: 'app-hero',
+  templateUrl: './hero.component.html',
+  styleUrls: ['./hero.component.css'],
+  standalone: true,
+  imports: [
+    ContainerComponent
+  ]
+})
+export class HeroComponent {
+
+  @HostBinding('class.hero')
+  readonly hbClassHero = true;
+
+}

apps/www/src/app/components/hero/index.ts

@@ -0,0 +1 @@
+export * from './hero.component';

apps/www/src/app/components/icon/icon-sprite-path.pipe.ts

@@ -0,0 +1,14 @@
+import {Pipe, PipeTransform} from "@angular/core";
+
+@Pipe({
+  name: 'iconSpritePath',
+  pure: true,
+  standalone: true,
+})
+export class IconSpritePathPipe implements PipeTransform {
+
+  transform(value: string): string {
+    return `/assets/core-ui/free.svg#cil-${value}`;
+  }
+
+}

apps/www/src/app/components/icon/icon.component.css

@@ -0,0 +1,16 @@
+:host(.icon) {
+  --_icon-color: inherit;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 1;
+  padding: 8px;
+  color: var(--_icon-color);
+  overflow: hidden;
+}
+
+.icon__svg {
+  max-width: 100%;
+  max-height: 100%
+}

apps/www/src/app/components/icon/icon.component.html

@@ -0,0 +1,3 @@
+<svg class="icon__svg">
+  <use [attr.xlink:href]="name | iconSpritePath" fill="red"/>
+</svg>

apps/www/src/app/components/icon/icon.component.ts

@@ -0,0 +1,27 @@
+import {Component, HostBinding, Input} from "@angular/core";
+import {IconSpritePathPipe} from "./icon-sprite-path.pipe";
+
+export type IconName =
+  | 'sun'
+  | 'sync'
+  | 'moon'
+  | 'menu'
+  | 'x'
+
+@Component({
+  selector: 'app-icon',
+  templateUrl: './icon.component.html',
+  styleUrls: ['./icon.component.css'],
+  standalone: true,
+  imports: [
+    IconSpritePathPipe
+  ]
+})
+export class IconComponent {
+
+  @HostBinding('class.icon')
+  readonly hbClassIcon = true;
+
+  @Input() name: IconName = 'x';
+
+}

apps/www/src/app/components/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon.component';

apps/www/src/app/components/masthead/index.ts

@@ -0,0 +1 @@
+export * from './masthead.component';

apps/www/src/app/components/masthead/masthead.component.css

@@ -0,0 +1,87 @@
+:host(.masthead) {
+  --_masthead-links-display: none;
+  display: block;
+  position: sticky;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding-block: var(--grid-gutter);
+  background-color: var(--color-plum-light);
+}
+
+:host(.masthead--expanded) {
+  --_masthead-links-display: flex;
+}
+
+.masthead__body {
+  display: grid;
+}
+
+.masthead__links {
+  list-style: none;
+  flex-direction: column;
+  display: var(--_masthead-links-display);
+  gap: 16px;
+  padding: 16px 0;
+  align-items: center;
+  position: absolute;
+  left: 0;
+  right: 0;
+  background-color: var(--color-plum-light);
+  top: calc(44px + var(--grid-gutter));
+  box-shadow: 0 8px 8px -8px rgba(0 0 0 / 25%);
+}
+
+
+.masthead__utility {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  order: -1;
+}
+
+.masthead__link {
+  font-family: var(--font-family);
+  font-weight: var(--font-weight-medium);
+  font-size: 1rem;
+  line-height: 1.4rem;
+  color: var(--color-white);
+}
+
+.masthead__link:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  box-shadow: 0 0 0 2px var(--color-plum-light),
+  0 0 0 4px var(--color-white);
+}
+
+.masthead__button {
+  width: 44px;
+}
+
+@media (min-width: 48em) {
+  :host(.masthead) {
+    --_masthead-links-display: flex;
+  }
+
+  .masthead__button {
+    display: none;
+  }
+
+  .masthead__body {
+    grid-template-columns: 1fr auto;
+  }
+
+  .masthead__links {
+    box-shadow: unset;
+    padding: 0;
+    gap: 16px;
+    flex-direction: row;
+    position: static;
+  }
+
+  .masthead__utility {
+    order: unset;
+  }
+}