feat: landing page

.website/angular.json

@@ -48,7 +48,7 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/favicon.ico",
+              "src/favicon.svg",
               "src/assets"
             ],
             "styles": [

.website/src/app/app.component.scss

@@ -0,0 +1,4 @@
+.content {
+    width: 100%;
+    height: 100vh;
+}

.website/src/app/app.component.ts

@@ -1,3 +1,4 @@
+import { CommonModule, NgOptimizedImage } from '@angular/common';
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
@@ -6,7 +7,7 @@ import { RouterOutlet } from '@angular/router';
   standalone: true,
   imports: [RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
 export class AppComponent {
   title = 'obelisk-next';

.website/src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Routes } from '@angular/router';
+import { LandingComponent } from './landing/landing.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  {
+    path: '',
+    component: LandingComponent,
+  },
+];

.website/src/app/landing/landing.component.html

@@ -0,0 +1,53 @@
+<div class="bg"></div>
+<div class="logo">
+  <div class="img-cont">
+    <img [ngSrc]="'/assets/img/logo_white.svg'" width="512" height="512" />
+  </div>
+</div>
+<div class="main">
+  <div class="title">Obelisk</div>
+  <div class="subtitle">
+    The high performance <br />data-in/data-out<br />
+    platform
+  </div>
+</div>
+<div class="sections">
+  <div class="s1">
+    @for(feat of features; track feat.title) {
+    <div class="feature">
+      <div class="title">{{ feat.title }}</div>
+      <div class="icon">
+        <img [src]="'/assets/img/' + feat.logo" width="64" height="64" />
+      </div>
+      <div class="description">{{ feat.description }}</div>
+    </div>
+    }
+  </div>
+  <div class="s2">
+    @for(feat of features2; track feat.title) {
+    <div class="feature">
+      <div class="title">{{ feat.title }}</div>
+      <div class="icon">
+        <img [src]="'/assets/img/' + feat.logo" width="64" height="64" />
+      </div>
+      <div class="description">{{ feat.description }}</div>
+    </div>
+    }
+  </div>
+
+  <!-- <div class="s3">
+    <h1>Section 3</h1>
+  </div> -->
+  <div class="footer">
+    @for(ref of references; track ref.name) {
+    <div class="reference" (click)="linkTo(ref.link)">
+      <div class="icon" [class.padded]="ref.padded">
+        <img [src]="'/assets/img/' + ref.icon" />
+      </div>
+      @if (ref.name) {
+      <div class="name">{{ ref.name }}</div>
+      }
+    </div>
+    }
+  </div>
+</div>

.website/src/app/landing/landing.component.scss

@@ -0,0 +1,206 @@
+:host {
+    color: white;
+    font-family:
+        system-ui,
+        -apple-system,
+        BlinkMacSystemFont,
+        "Segoe UI",
+        Roboto,
+        Oxygen,
+        Ubuntu,
+        Cantarell,
+        "Open Sans",
+        "Helvetica Neue",
+        sans-serif;
+}
+
+.bg {
+    position: fixed;
+    background-image: url("/assets/img/bg.jpg");
+    background-size: cover;
+    width: 100%;
+    height: 100vh;
+}
+
+.logo {
+    position: fixed;
+    height: 600px;
+    width: 100%;
+    mix-blend-mode: overlay;
+    .img-cont {
+        display: flex;
+        justify-content: flex-end;
+        margin: 100px auto;
+        max-width: 1280px;
+        z-index: 100;
+        @media screen and (max-width: 1380px) {
+            padding: 0 50px;
+        }
+
+        img {
+            opacity: 0.6;
+        }
+    }
+}
+
+.main {
+    position: relative;
+    color: white;
+    padding-top: 120px;
+    z-index: 150;
+    @media screen and (max-width: 1380px) {
+        padding: 100px 50px;
+    }
+
+    .title {
+        margin: 0 auto;
+        max-width: 1280px;
+        font-size: 96px;
+    }
+
+    .subtitle {
+        margin: 0 auto;
+        max-width: 1280px;
+        font-size: 60px;
+    }
+}
+
+.sections {
+    position: absolute;
+    top: 700px;
+    width: 100%;
+    overflow-x: hidden;
+
+    > div {
+        color: white;
+        padding: 25px;
+    }
+
+    .s1 {
+        background-color: white;
+        height: 300px;
+        background-color: rgba(100, 100, 255, 0.2);
+        position: relative;
+        padding-top: 50px;
+        padding-bottom: 50px;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(200px, 1fr);
+        justify-items: center;
+        align-content: center;
+        column-gap: 20px;
+    }
+
+    .s2 {
+        background-color: transparent;
+        height: 300px;
+        position: relative;
+        padding-top: 50px;
+        padding-bottom: 50px;
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(200px, 1fr);
+        // grid-template-columns: repeat(4, minmax(200px, 1fr));
+        justify-items: center;
+        align-content: center;
+        column-gap: 20px;
+        // background-color: rgba(255, 255, 255, 0.4);
+    }
+
+    .s1 .feature,
+    .s2 .feature {
+        display: grid;
+        grid-template-rows: auto 96px 1fr;
+        grid-template-columns: 1fr;
+        height: 100%;
+        justify-items: center;
+        align-items: flex-start;
+        width: 200px;
+        row-gap: 20px;
+
+        .title {
+            font-weight: bold;
+            font-size: 20px;
+        }
+
+        .icon {
+            background-color: white;
+            border-radius: 50%;
+            width: 96px;
+            height: 96px;
+            display: grid;
+            place-items: center;
+            img {
+            }
+        }
+
+        .description {
+            font-size: 15px;
+            text-align: center;
+        }
+    }
+
+    .s3 {
+        background-color: transparent;
+        height: 400px;
+        background-color: rgba(255, 255, 255, 0.1);
+    }
+    .footer {
+        background-color: rgba(0, 0, 0, 0.4);
+        height: 160px;
+        padding: 20px 50px;
+        display: flex;
+        justify-content: center;
+        // align-items: center;
+
+        .reference {
+            position: relative;
+            display: grid;
+            grid-template-columns: 1fr auto;
+            grid-template-rows: 96px;
+            justify-content: center;
+            align-content: center;
+            align-items: center;
+            cursor: pointer;
+            opacity: 0.7;
+            .icon {
+                // position: relative;
+
+                img {
+                    max-height: 96px;
+                }
+
+                &.padded {
+                    padding: 30px;
+                    img {
+                        max-height: calc(96px - 40px);
+                    }
+                }
+            }
+
+            &:not(:first-child):before {
+                content: "";
+                border-left: 1px solid white;
+                height: 40px;
+                position: absolute;
+                vertical-align: mid;
+            }
+
+            &:hover {
+                opacity: 1;
+            }
+
+            .name {
+                font-size: 16px;
+                font-weight: bold;
+                grid-column: 2;
+                align-self: center;
+                margin: 0 30px 0 12px;
+            }
+
+            .padded + .name {
+                margin-left: calc(12px - 30px);
+            }
+        }
+    }
+}